Spline Series


RadCartesianChart visualizes each data item from the LineSeries and connects them with curved line segments. The SplineSeries extend LineSeries, so they are also CategoricalSeries and require one CategoricalAxis and one NumricalAxis.


SplineSeries extend LineSeries so they provide the same properties to change their style:

  • Stroke (Color): changes the color used to draw lines.
  • StrokeThickness (double): changes the width of the lines.


Here is an example how to create RadCartesianChart with Spline Series:

First, create the needed business objects, for example:

public class CategoricalData
    public object Category { get; set; }

    public double Value { get; set; }

Then create a ViewModel:

Finally, use the following snippet to declare a RadCartesianChart with Spline Series in XAML and in C#:

        <local:CategoricalDataViewModel />
        <telerikChart:CategoricalAxis LabelFitMode="MultiLine"
                                      PlotMode="OnTicks" />
        <telerikChart:NumericalAxis />
        <telerikChart:SplineSeries ValueBinding="Value"
                                   ItemsSource="{Binding Data}" />
var chart = new RadCartesianChart
    BindingContext = new CategoricalDataViewModel(),
    HorizontalAxis = new CategoricalAxis()
        LabelFitMode = AxisLabelFitMode.MultiLine,
        PlotMode = AxisPlotMode.OnTicks
    VerticalAxis = new NumericalAxis(),
    Series =
        new SplineSeries
            ValueBinding = new PropertyNameDataPointBinding("Value"),
            CategoryBinding = new PropertyNameDataPointBinding("Category")

chart.Series[0].SetBinding(ChartSeries.ItemsSourceProperty, "Data");

Where the telerikChart namespace is the following:

using Telerik.XamarinForms.Chart;

And here is the result:

Basic SplineSeries

A sample Spline Series example can be found in the Chart/Series folder of the SDK Samples Browser application.

Customization Example

Here we make some customization:

    var series = new SplineSeries 
        Stroke = new Color(0.6, 0.6, 0.9), 
        StrokeThickness = 5 

Customized SplineSeries

See Also

In this article
Not finding the help you need? Improve this article