Skip to main content

How to: Create a 2D Spline Chart

  • 4 minutes to read

This example demonstrates how to create a 2D Spline chart.

Spline chart

  1. Create a ChartControl and specify its ChartControl.Diagram property to a SimpleDiagram2D object.

    Note

    Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

  2. Add a SplineSeries2D object to the Diagram.Series collection.

    Note

    Note that the Diagram.Series is a content property. You can declare series in XAML directly after a diagram’s declaration without wrapping them in opening and closing Diagram.Series tags.

    Use the following properties to bind the series to data:

  3. To enable series markers, use the LineSeries2D.MarkerVisible property. The LineSeries2D.MarkerSize property allows you to set the marker size.

  4. Assign a SeriesLabel object to the Series.Label property. Use the following properties to customize series label options:

  5. Use the properties below to customize axes:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        x:Class="SplineChart.MainWindow"
        xmlns:local="clr-namespace:SplineChart"
        Title="Spline Chart" Height="440" Width="660">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl>
            <dxc:XYDiagram2D>
                <dxc:SplineSeries2D DataSource="{Binding Data}" 
                                    ArgumentDataMember="Argument"
                                    ValueDataMember="Value"
                                    LineTension="0.8" 
                                    MarkerSize="15"
                                    MarkerVisible="True">
                    <dxc:SplineSeries2D.Label>
                        <dxc:SeriesLabel dxc:MarkerSeries2D.Angle="90" 
                                         ConnectorVisible="False"
                                         Indent="15"
                                         ResolveOverlappingMode="Default"                                                   
                                         Visible="True"/>
                    </dxc:SplineSeries2D.Label>
                </dxc:SplineSeries2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D GridLinesVisible="True"/>
                </dxc:XYDiagram2D.AxisX>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.Title>
                            <dxc:AxisTitle Content="Cents per Gallon"/>
                        </dxc:AxisY2D.Title>
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range dxc:AxisY2D.AlwaysShowZeroLevel="False"/>
                        </dxc:AxisY2D.WholeRange>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
            </dxc:XYDiagram2D>
            <dxc:ChartControl.Titles>
                <dxc:Title Dock="Top" 
                           HorizontalAlignment="Center" 
                           Content="U.S. Fuel Oil Prices"/>
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>