RadCartesianChart visualizes ScatterAreaSeries as the area enclosed by the coordinate axes and straight line segments that connect the series data points. The ScatterAreaSeries inherit from the ScatterPointSeries class and also require both axes of the chart to be of type NumericalAxis.


ScatterAreaSeries provides the following properties to change its style:

  • Stroke (Color): Changes the color used to draw lines.
  • StrokeThickness (double): Changes the width of the lines.
  • Fill (Color): Changes the color of the chart area.


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

First, create the needed business objects, for example:

public class NumericalData
    public double XData { get; set; }
    public double YData { get; set; }

Then create a ViewModel:

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

        <local:NumericalViewModel />
        <telerikChart:NumericalAxis LabelFitMode="MultiLine" />
        <telerikChart:NumericalAxis />
        <telerikChart:ScatterAreaSeries XValueBinding="XData"
                                        ItemsSource="{Binding Data}" />
var chart = new RadCartesianChart
    BindingContext = new NumericalViewModel(),
    HorizontalAxis = new NumericalAxis()
        LabelFitMode = AxisLabelFitMode.MultiLine
    VerticalAxis = new NumericalAxis(),
    Series =
        new ScatterAreaSeries
            XValueBinding = new PropertyNameDataPointBinding("XData"),
            YValueBinding = new PropertyNameDataPointBinding("YData")

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

Where the telerikChart namespace is the following:

using Telerik.XamarinForms.Chart;

And here is the result:

Basic ScatterAreaSeries

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

Customization Example

Here we make some customization:

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

See Also

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