How to: Create a 2D Spline Chart
The following example demonstrates how to create a 2D Spline chart. To do this, it is necessary to assign the ChartControl.Diagram property to XYDiagram2D, and then add a SplineSeries2D object with points to the diagram’s Diagram.Series collection.
Also, this example shows how to specify SplineSeries2D.LineTension and LineSeries2D.MarkerSize properties and add a title to a chart.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-2d-spline-chart-t172158.
<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"
Title="Spline Chart" Height="350" Width="525">
<Grid>
<dxc:ChartControl>
<dxc:ChartControl.Diagram>
<dxc:XYDiagram2D>
<dxc:XYDiagram2D.Series>
<dxc:SplineSeries2D LineTension="0.8" MarkerSize="15"
MarkerVisible="True">
<dxc:SplineSeries2D.Label>
<dxc:SeriesLabel ConnectorVisible="False"
ResolveOverlappingMode="Default"
Visible="True" />
</dxc:SplineSeries2D.Label>
<dxc:SplineSeries2D.Points>
<dxc:SeriesPoint Argument="1/1/2005" Value="138.7" />
<dxc:SeriesPoint Argument="2/1/2005" Value="141.4" />
<dxc:SeriesPoint Argument="3/1/2005" Value="159.5" />
<dxc:SeriesPoint Argument="4/1/2005" Value="160.7" />
<dxc:SeriesPoint Argument="5/1/2005" Value="148.8" />
<dxc:SeriesPoint Argument="6/1/2005" Value="166.6" />
</dxc:SplineSeries2D.Points>
</dxc:SplineSeries2D>
</dxc:XYDiagram2D.Series>
<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.Diagram>
<dxc:ChartControl.Titles>
<dxc:Title Dock="Top" HorizontalAlignment="Center" Content="U.S. Fuel Oil Prices" />
</dxc:ChartControl.Titles>
</dxc:ChartControl>
</Grid>
</Window>