SplineSeries

Overview

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.

Features

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.

Example

Here is an example of how to create a basic RadCartesianChart with SplineSeries in xaml:

<telerikChart:RadCartesianChart>
  <telerikChart:RadCartesianChart.BindingContext>
    <viewMoedls:CategoricalViewModel/>
  </telerikChart:RadCartesianChart.BindingContext>
  <telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:CategoricalAxis/>
  </telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:NumericalAxis/>
  </telerikChart:RadCartesianChart.VerticalAxis>
  <telerikChart:RadCartesianChart.Series>
    <telerikChart:SplineSeries ItemsSource="{Binding CategoricalData}">
      <telerikChart:SplineSeries.ValueBinding>
        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
      </telerikChart:SplineSeries.ValueBinding>
      <telerikChart:SplineSeries.CategoryBinding>
        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
      </telerikChart:SplineSeries.CategoryBinding>
    </telerikChart:SplineSeries>
  </telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>

Where

xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"

Here is an example of how to create a RadCartesianChart with SplineSeries in code:

var chart = new RadCartesianChart
{
    HorizontalAxis = new CategoricalAxis(),
    VerticalAxis = new NumericalAxis(),
    BindingContext = new CategoricalViewModel()
};

var series = new SplineSeries();
series.SetBinding(SplineSeries.ItemsSourceProperty, new Binding("CategoricalData"));   
series.ValueBinding = new PropertyNameDataPointBinding("Value");
series.CategoryBinding = new PropertyNameDataPointBinding("Category");

chart.Series.Add(series);

Here is the sample data:

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

public class CategoricalViewModel
{
    private static Random random = new Random();
    private static string[] categories = new string[] { "Greenings", "Perfecto", "NearBy", "Family", "Fresh" };

    public CategoricalViewModel()
    {
        this.CategoricalData = GetCategoricalData();
    }

    public ObservableCollection<CategoricalData> CategoricalData { get; set; }

    public static ObservableCollection<CategoricalData> GetCategoricalData()
    {
        var data = new ObservableCollection<CategoricalData>();
        for (int i = 0; i < categories.Length; i++)
        {
            data.Add(new CategoricalData() { Value = random.Next(50, 100), Category = categories[i] });
        }

        return data;
    }
}

And here is the result:

Basic SplineSeries

Here we make some customization:

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

Customized SplineSeries