Charts

TwScatterChart

TwScatterChart is a Blazor scatter plot that positions points by two values. Also draws bubble charts and connected scatter plots.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwScatterChart positions points by two numeric values to show how they relate. Pass one or more ChartPointSeries, each a named list of ChartPoint. XTitle and YTitle label the axes and name the values in tooltips and the table view.

Price against rating

RAZOR

<TwChart Title="Price against rating">
    <TwScatterChart Series="@_products" XTitle="Price" YTitle="Rating" />
</TwChart>

CSHARP

@code {
    private readonly ChartPointSeries[] _products =
    [
        new("Audio", [new(49, 4.1, "Buds"), new(129, 4.6, "Studio"), new(79, 3.8, "Sport")]),
        new("Wearables", [new(199, 4.4, "Pulse"), new(99, 3.6, "Band"), new(249, 4.7, "Pro")])
    ];
}

Bubble chart

Give points a Size and each is drawn as a bubble whose area follows it, adding a third value. SizeTitle names it.

Price, rating and units sold

RAZOR

<TwChart Title="Price, rating and units sold">
    <TwScatterChart Series="@_bubbles" XTitle="Price" YTitle="Rating" SizeTitle="Units sold" />
</TwChart>

CSHARP

@code {
    private readonly ChartPointSeries[] _bubbles =
    [
        new("Audio", [new(49, 4.1, "Buds", 320), new(129, 4.6, "Studio", 180), new(79, 3.8, "Sport", 240)]),
        new("Wearables", [new(199, 4.4, "Pulse", 150), new(99, 3.6, "Band", 410), new(249, 4.7, "Pro", 90)])
    ];
}

Point labels

Set ShowLabels to print each point's Label beside it.

Price against rating

RAZOR

<TwChart Title="Price against rating">
    <TwScatterChart Series="@_products" XTitle="Price" YTitle="Rating" ShowLabels="true" />
</TwChart>

Connected scatter plot

Set Connect to join the points of each series in order, tracing a path through two variables over time.

Unemployment against inflationPercent, by year

RAZOR

<TwChart Title="Unemployment against inflation" Description="Percent, by year">
    <TwScatterChart Series="@_economy" XTitle="Unemployment" YTitle="Inflation" Connect="true" ShowLabels="true" />
</TwChart>

CSHARP

@code {
    private readonly ChartPointSeries[] _economy =
    [
        new("Economy", [new(4.1, 2.0, "2021"), new(3.8, 6.2, "2022"), new(4.3, 7.4, "2023"), new(4.6, 3.1, "2024"), new(4.4, 2.4, "2025")])
    ];
}

Colors

Any two points can sit side by side, so keep to three series or fewer for colors that stay easy to tell apart.

Summary

Tooltips and the table view give the X and Y values of each point, and its size when it has one.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwScatterChart

Basic usage

Bubble chart

Point labels

Connected scatter plot

Colors

Summary

Shared features

Keyboard navigation