New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI Cartesian Chart Scatter Series

Updated on Oct 13, 2026

The scatter series is a combination of a series type and two numerical axes. Use the following series with two NumericalAxis instances to render scatter charts:

Data Binding

To configure a scatter series:

Set the chart's horizontal and vertical axes to NumericalAxis.
Set the series ItemsSource to a collection of data items with two numeric members.
Set HorizontalBinding to the member that provides the X value.
Set VerticalBinding to the member that provides the Y value.

Line and Area Customization

Use the following properties to customize the appearance of the line and area:

Fill (Brush)—Defines the fill of the area (applicable for AreaSeries and SplineAreaSeries).
Stroke (Brush)—Defines the brush to paint the stroke of the line or area.
StrokeThickness (double)—Defines the thickness of the line or area stroke.

Labels Customization

Use the following properties to configure the labels visualized for each data point:

ShowLabels (bool)—Defines whether the axis labels will be displayed.
LabelOffset (Size)—Defines the offset of the labels from the line or area.
LabelStyle (Style with target type ChartLabelAppearance)—Defines the style of the axis labels.

Example

The following example shows how to plot a PointSeries and a LineSeries as scatter series against two numerical axes.

Define the data model:

public class PointData
{
    public double XValue { get; set; }
    public double YValue { get; set; }
}

Define the ViewModel:

public class ScatterViewModel
{
    public ScatterViewModel()
    {
        this.Data = new ObservableCollection<PointData>
        {
            new PointData { XValue = 2, YValue = 13 },
            new PointData { XValue = 5, YValue = 31 },
            new PointData { XValue = 9, YValue = 22 },
            new PointData { XValue = 14, YValue = 45 },
            new PointData { XValue = 22, YValue = 38 },
            new PointData { XValue = 31, YValue = 54 },
        };
    }

    public ObservableCollection<PointData> Data { get; set; }
}

Define the chart with two NumericalAxis instances in XAML:

XAML

<charts:RadCartesianChart>
    <charts:RadCartesianChart.Axes>
        <charts:CategoricalAxis />
        <charts:NumericalAxis />
    </charts:RadCartesianChart.Axes>
    <charts:RadCartesianChart.Series>
        <charts:LineSeries ItemsSource="{Binding Data}"
                            HorizontalBinding="XValue"
                            VerticalBinding="YValue" />
        <charts:PointSeries ItemsSource="{Binding Data}"
                            HorizontalBinding="XValue"
                            VerticalBinding="YValue"
                            PointSize="10" />
    </charts:RadCartesianChart.Series>
</charts:RadCartesianChart>

Add the charts namespace: