Telerik UI for Windows 8 XAML

Overview

When using SplineAreaSeries the data points are connected with smooth line segments and the area enclosed by the line and the coordinate axis may be optionally stroked and/or filled as shown on the image below.

Categorical Spline Area Series
Note

SplineAreaSeries class inherits from the AreaSeries class - See the inherited properties.

Example

Here's an example of how to create a RadCartesianChart with SplineAreaSeries.

  1. First, create a class for the sample data.

    C# Copy imageCopy
    public class Data
    {
        public string Category { get; set; }
    
        public double Value { get; set; }
    }
  2. Then create the sample data.

    C# Copy imageCopy
    List<Data> data = new List<Data>();
    data.Add(new Data() { Category = "Apples", Value = 5 });
    data.Add(new Data() { Category = "Oranges", Value = 9 });
    data.Add(new Data() { Category = "Pineaples", Value = 8 });
    
    this.splineAreaSeries.DataContext = data;
  3. Finally, create the chart using XAML.

    XAML Copy imageCopy
    <telerik:RadCartesianChart x:Name="splineAreaSeries">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:SplineAreaSeries ItemsSource="{Binding}">
            <telerik:SplineAreaSeries.CategoryBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="Category"/>
            </telerik:SplineAreaSeries.CategoryBinding>
            <telerik:SplineAreaSeries.ValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
            </telerik:SplineAreaSeries.ValueBinding>
        </telerik:SplineAreaSeries>
    </telerik:RadCartesianChart>