Area Series


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


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.


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

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

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

    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.

    <telerikChart:RadCartesianChart x:Name="areaSeries" PaletteName="DefaultLight">
        <telerikChart:AreaSeries ItemsSource="{Binding}">
                <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
In this article