Area Series


RadCartesianChart visualizes AreaSeries as an area on the chart that is enclosed by the coordinate axes and straight line segments that connect the data points represented by these series. The AreaSeries extend CategoricalStrokedSeries, so they are also CategoricalSeries and require one CategoricalAxis and one NumricalAxis.


  • Fill : Defines the fill of the AreaSeries.
  • Stroke : Changes the color used to draw lines.
  • StrokeThickness : Changes the width of the lines.


Here is an example how to create RadCartesianChart with Area Series:

First, create the needed business objects, for example:

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

    public double Value { get; set; }

Then create a ViewModel:

Finally, use the following snippet to declare a RadCartesianChart with Area Series in XAML and in C#:

        <local:CategoricalViewModel />
        <telerikChart:CategoricalAxis LabelFitMode="MultiLine"
                                      PlotMode="OnTicks" />
        <telerikChart:NumericalAxis />
        <telerikChart:AreaSeries ValueBinding="Value"
                                 ItemsSource="{Binding Data}" />
var chart = new RadCartesianChart
    BindingContext = new CategoricalViewModel(),
    HorizontalAxis = new CategoricalAxis()
        LabelFitMode = AxisLabelFitMode.MultiLine,
        PlotMode = AxisPlotMode.OnTicks
    VerticalAxis = new NumericalAxis(),
    Series =
        new AreaSeries
            ValueBinding = new PropertyNameDataPointBinding("Value"),
            CategoryBinding = new PropertyNameDataPointBinding("Category")

chart.Series[0].SetBinding(ChartSeries.ItemsSourceProperty, "Data");

Where the telerikChart namespace is the following:

using Telerik.XamarinForms.Chart;

Here is the result:

Basic AreaSeries

Customization Example

Here we have some customizations:

    var series = new AreaSeries 
        Fill = new Color(0.8, 0.8, 1),
        Stroke = new Color(0.6, 0.6, 0.9), 
        StrokeThickness = 5

This is the final result:

Customized AreaSeries

A sample Ares Series example can be found in the Chart/Series folder of the SDK Samples Browser application.

See Also

In this article
Not finding the help you need? Improve this article