New to Telerik UI for WinUI? Download free 30-day trial

Area Series

With an 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.

Properties

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 Polyline shape.

Example

Examples 1, 2 and 3 show how to create a RadCartesianChart with an AreaSeries.

Example 1: Defining the model

public class Data 
{ 
    public string Category { get; set; } 
 
    public double Value { get; set; } 
} 

Example 2: Populating with data

public MainPage() 
{ 
    this.InitializeComponent(); 
    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; 
 
} 

Example 3: Defining the AreaSeries

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"> 
    <telerikChart:RadCartesianChart x:Name="areaSeries" PaletteName="DefaultLight"> 
        <telerikChart:RadCartesianChart.VerticalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.VerticalAxis> 
        <telerikChart:RadCartesianChart.HorizontalAxis> 
            <telerikChart:CategoricalAxis/> 
        </telerikChart:RadCartesianChart.HorizontalAxis> 
 
        <telerikChart:AreaSeries ItemsSource="{Binding}"> 
            <telerikChart:AreaSeries.CategoryBinding> 
                <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/> 
            </telerikChart:AreaSeries.CategoryBinding> 
            <telerikChart:AreaSeries.ValueBinding> 
                <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/> 
            </telerikChart:AreaSeries.ValueBinding> 
        </telerikChart:AreaSeries> 
    </telerikChart:RadCartesianChart> 
</Grid> 

Figure 1: Result from Example 3

Categorical Area Series

In this article
Not finding the help you need?