Spline Chart in WPF Charts (SfChart)

15 Jan 2021 / 4 minutes to read

Spline Chart

SplineSeries resembles line series, but the difference between them is that instead of connecting the data points with line segments, the data points are connected by smooth Bezier curves.

<chart:SplineSeries  XBindingPath="Year"     

ItemsSource="{Binding List}" YBindingPath="India"               

Interior="#4A4A4A"/>

<chart:SplineSeries  XBindingPath="Year"     

ItemsSource="{Binding List}" YBindingPath="America"               

Interior="#4A4A4A"/>
SplineSeries series1 = new SplineSeries()
{

    ItemsSource = new ViewModel().List,

    XBindingPath = "Year",

    YBindingPath = "India",

    Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))

};

SplineSeries series2 = new SplineSeries()
{

    ItemsSource = new ViewModel().List,

    XBindingPath = "Year",

    YBindingPath = "America",

    Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))

};

chart.Series.Add(series1);

chart.Series.Add(series2);

Spline chart type in WPF

Dashed Lines

StrokeDashArray property of the SplineSeries is used to render spline series with dashes.

<chart:SplineSeries ItemsSource="{Binding List}" XBindingPath="Year" YBindingPath="India" StrokeDashArray="5,3" />
SplineSeries series = new SplineSeries()
{
    ItemsSource = new ViewModel().List,
    XBindingPath = "Year",
    YBindingPath = "India"
};

DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(5);
doubleCollection.Add(3);
series.StrokeDashArray = doubleCollection;
chart.Series.Add(series);

Spline Area Chart

SplineAreaSeries connects a series of data points using smooth Bezier line curves, with the underlying areas filled.

<chart:SplineAreaSeries Interior="#7F7F7F"              

ItemsSource="{Binding Products}" XBindingPath="ProdName"     

YBindingPath="Price" />
SplineAreaSeries series = new SplineAreaSeries()
{

    ItemsSource = new ViewModel().Products,

    XBindingPath = "ProdName",

    YBindingPath = "Price",

    Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))

};

chart.Series.Add(series);

SplineArea chart type in WPF

Spline Type

Spline and SplineArea series provide support for various spline type. The spline type of the series can be changed by using its SplineType property. The following spline types are supported by Spline and SplineArea series:

Cardinal

The following code illustrates how to set the SplineType value as Cardinal.

<chart:SplineSeries SplineType="Cardinal">

</chart:SplineSeries>
SplineSeries series = new SplineSeries();

series.SplineType = SplineType.Cardinal;

Cardinal spline support in WPF Chart

Monotonic

The following code illustrates how to set the SplineType value as Monotonic.

<chart:SplineSeries SplineType="Monotonic">

</chart:SplineSeries>
SplineSeries series = new SplineSeries();

series.SplineType = SplineType.Monotonic;

Monotonic spline support in WPF Chart

Clamped

The following code illustrates how to set the SplineType value as Clamped.

<chart:SplineSeries SplineType="Clamped">

</chart:SplineSeries>
SplineSeries series = new SplineSeries();

series.SplineType = SplineType.Clamped;

Clamped spline support in WPF Chart