Basic Usage
Use ChartType="ChartType.ScatterPlot" to render data as individual points on a two-dimensional axis.
Each data point requires both an X and a Y value, supplied via ChartData<T> using (x, y) tuples.
Series are clickable and support CanHideSeries for legend-driven visibility toggling.
Use ScatterPlotChartOptions to configure PointRadius, axis tick spacing, tooltips, and data labels.
Selected: None
@using MudBlazor.Charts; <MudPaper Class="doc-section-component-container"> <MudChart T="double" ChartType="ChartType.ScatterPlot" ChartSeries="@_series" @bind-SelectedIndex="_index" CanHideSeries="true" Width="100%" Height="@_height" ChartOptions="@_options" /> </MudPaper> <MudGrid> <MudItem xs="12"> <MudText Typo="Typo.body1" Class="py-3">Selected: @(_index < 0 ? "None" : _series[_index].Name)</MudText> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox T="bool" @bind-Value="_options.ShowDataLabels" Color="Color.Primary" Label="Show Data Labels" /> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox T="bool" @bind-Value="_options.ShowToolTips" Color="Color.Primary" Label="Show Tooltips" /> </MudItem> <MudItem md="6" xs="12"> <MudSlider @bind-Value="_options.PointRadius" Min="2" Max="12" Step="1">Point Radius: @_options.PointRadius</MudSlider> </MudItem> </MudGrid>
@code { private int _index = -1; private string _height = "350px"; private ScatterPlotChartOptions _options = new() { XAxisTitle = "Age (years)", YAxisTitle = "Blood Pressure (mmHg)", XAxisTicks = 10, YAxisTicks = 10, XAxisLines = true, ShowToolTips = true, PointRadius = 5, }; private readonly List<ChartSeries<double>> _series = [ new() { Name = "Group A (Treated)", Data = new([(20, 112), (20, 118), (30, 119), (30, 124), (40, 122), (40, 130), (50, 128), (50, 135), (60, 133), (60, 140)]), }, new() { Name = "Group B (Control)", Data = new([(20, 125), (20, 130), (30, 132), (30, 138), (40, 138), (40, 145), (50, 142), (50, 150), (60, 150), (60, 158)]), }, ]; }
Regression Line Overlay
A series can be rendered as a continuous line instead of scatter points by setting
ScatterSeriesType = ScatterSeriesType.Line in SeriesDisplayOverrides.
This is useful for overlaying regression lines or trend lines on top of scatter data.
The line series participates in axis scaling and appears in the legend alongside scatter series.
@using MudBlazor.Charts <MudPaper Class="doc-section-component-container"> <MudChart T="double" ChartType="ChartType.ScatterPlot" ChartSeries="@_series" Width="100%" Height="350px" ChartOptions="@_options" /> </MudPaper>
@code { private ChartSeries<double> _data = new() { Name = "Measurements", Data = new([(1, 1.8), (1, 2.4), (2, 3.5), (2, 2.9), (3, 3.1), (4, 5.1), (4, 4.5), (5, 4.8), (6, 6.4), (6, 7.0), (7, 7.2), (8, 8.0), (8, 9.1), (9, 8.6), (10, 10.1)]), }; private ChartSeries<double> _regression = new() { Name = "Regression", Data = new([(1, 1.5), (10, 10.5)]), }; private List<ChartSeries<double>> _series = default!; private ScatterPlotChartOptions _options = default!; protected override void OnInitialized() { _series = [_data, _regression]; _options = new ScatterPlotChartOptions { XAxisTitle = "Input Voltage (V)", YAxisTitle = "Measured Output (mV)", XAxisTicks = 1, YAxisTicks = 1, XAxisLines = true, ShowToolTips = true, PointRadius = 5, SeriesDisplayOverrides = new Dictionary<IChartSeries, SeriesDisplayOverride> { [_regression] = new ScatterSeriesDisplayOverride { ScatterSeriesType = ScatterSeriesType.Line, StrokeOpacity = 0.75, } } }; } }