Spline in WPF Charts (SfChart)

2 Aug 20214 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);

WPF Spline Chart

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);

NOTE

You can explore our WPF Spline Chart feature tour page for its groundbreaking features. You can also explore our WPF Spline Chart example to know how to displays multiple series of data as spline.

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);

WPF SplineArea Chart

NOTE

You can explore our WPF Spline Area Chart feature tour page for its groundbreaking features. You can also explore our WPF Spline Area Chart example to know how to displays multiple series of data as spline area.

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;

WPF Chart with Cardinal Spline

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;

WPF Chart with Monotonic Spline

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;

WPF Chart with Clamped Spline