Skip to main content

Scatter chart

info

Charts are available with Avalonia Pro.

Scatter charts use dots to represent values for two different numeric variables. They are essential for displaying and comparing numeric values, such as scientific, statistical, and engineering data.

Scatter chart plotting individual data points as dots across two numeric axes to reveal correlations.

When to use​

  • Correlation: Identifying relationships between two variables (e.g., height vs weight).
  • Distribution: Visualizing the spread and clustering of data points.
  • Outlier detection: Easily spotting data points that fall far from the norm.

Code example​

XAML​

<charts:CartesianChart Name="ScatterChart" Title="Scatter Plot" Height="250">
    <charts:CartesianChart.HorizontalAxis>
        <charts:NumericalAxis />
    </charts:CartesianChart.HorizontalAxis>
    <charts:CartesianChart.VerticalAxis>
        <charts:NumericalAxis />
    </charts:CartesianChart.VerticalAxis>
    <charts:CartesianChart.Series>
        <charts:ScatterSeries Title="Data Points"
                              ItemsSource="{Binding ScatterSeriesData}"
                              Fill="Purple"
                              MarkerSize="10"
                              MarkerShape="Circle" />
    </charts:CartesianChart.Series>
</charts:CartesianChart>

Data model (C#)​

public ObservableCollection<int> ScatterSeriesData { get; } =
    new() { 25, 45, 35, 55, 40, 60, 50, 70, 55, 75 };

Common properties​

PropertyDescriptionDefault
TitleThe name of the series.null
ItemsSourceThe collection of data points.null
CategoryPathValue of the category path (X-axis).null
ValuePathValue of the value path (Y-axis).null
ShowMarkersWhether to display data point markers.true
MarkerSizeSize of the dots in pixels.8
MarkerShapeShape of the dots, such as Circle or Square.Circle
MarkerFillBrush used to fill the markers. When null, Fill is used.null
MarkerStrokeBrush used for marker outlines.null
MarkerStrokeThicknessThickness of marker outlines. When NaN, the series StrokeThickness is used.NaN
FillThe color of the scatter dots.Theme-dependent

Scatter line variant​

The ScatterLineSeries extends scatter charts by drawing connecting lines between data points, combining scatter dot visibility with line trend visualization.

XAML​

<charts:CartesianChart Name="ScatterChart" Title="Scatter Plot" Height="250">
                        <charts:CartesianChart.HorizontalAxis>
                            <charts:NumericalAxis />
                        </charts:CartesianChart.HorizontalAxis>
                        <charts:CartesianChart.VerticalAxis>
                            <charts:NumericalAxis />
                        </charts:CartesianChart.VerticalAxis>
                        <charts:CartesianChart.Series>
                            <charts:ScatterSeries Title="Data Points" ItemsSource="{Binding ScatterSeriesData}" Fill="Purple" MarkerSize="10" MarkerShape="Circle" />
                        </charts:CartesianChart.Series>
                    </charts:CartesianChart>

ScatterLineSeries properties​

PropertyDescriptionDefault
ShowLinesWhether to show connecting lines between scatter points.true
StrokeDashStyleDash style for the connecting lines. When null, lines are solid.null
ShowMarkersWhether to display data point markers.true
MarkerSizeSize of the markers in pixels.8
MarkerShapeShape of the markers, such as Circle or Square.Circle
MarkerFillBrush used to fill the markers. When null, Fill is used.null
MarkerStrokeBrush used for marker outlines.null
MarkerStrokeThicknessThickness of marker outlines. When NaN, the series StrokeThickness is used.NaN

See also​

On this page