Telerik UI for Windows 8 XAML

Overview

When using AreaSeries the data points are connected with straight 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 Area Series

Properties

Note

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

  • StrokeMode: Gets or sets the mode that defines how the area is stroked. The available modes are:

    • None: No outlining.

    • LeftLine: The left border of the plot area defined by the data points and the horizontal axis is outlined.

    • Points: The line that connects all points is outlined. This is the default mode.

    • RightLine: The right border of the plot area defined by the data points and the horizontal axis is outlined.

    • PlotLine: The bottom border of the plot area is outlined.

    • LeftAndPoints: LeftLine and Points modes are enabled.

    • RightAndPoints: RightLine and Points modes are enabled.

    • AllButPlotLine: All modes except the PlotLine are enabled.

    • All: All modes are enabled - the plot area is fully outlined.

  • Fill (Brush): Gets or sets the style used to draw the Windows.UI.Xaml.Shapes.Polyline shape.

Example

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

  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.areaSeries.DataContext = data;
  3. Finally, create the chart using XAML.

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