Charts

TwCategoricalScatterChart

TwCategoricalScatterChart is a Blazor chart that places a dot where two categories meet and sizes it by a value.

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

TwCategoricalScatterChart places a dot where a horizontal category meets a vertical one and sizes it by a value. Each ChartCategoricalPoint names its two categories, so you only list the combinations that exist.

Survey responsesNumber of comments by topic and sentiment

RAZOR

<TwChart Title="Survey responses" Description="Number of comments by topic and sentiment">
    <TwCategoricalScatterChart Points="@_responses" XTitle="Topic" YTitle="Sentiment" ValueTitle="Comments" />
</TwChart>

CSHARP

@code {
    private readonly ChartCategoricalPoint[] _responses =
    [
        new("Service", "Positive", 48), new("Price", "Positive", 12), new("Quality", "Positive", 62),
        new("Service", "Neutral", 15), new("Price", "Neutral", 20), new("Quality", "Neutral", 9),
        new("Service", "Negative", 7), new("Price", "Negative", 34)
    ];
}

Sparse combinations

The chart is most useful when many combinations are empty, where a heatmap would be mostly blank cells. Categories appear in the order they are first used, so list the points in the order you want the axes to read.

Incidents by team and severityLast quarter

RAZOR

<TwChart Title="Incidents by team and severity" Description="Last quarter">
    <TwCategoricalScatterChart Points="@_incidents" XTitle="Team" YTitle="Severity" ValueTitle="Incidents" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartCategoricalPoint[] _incidents =
    [
        new("Payments", "Critical", 2), new("Search", "Critical", 1),
        new("Payments", "High", 5), new("Accounts", "High", 3), new("Mobile", "High", 8),
        new("Search", "Medium", 11), new("Mobile", "Medium", 14), new("Reports", "Medium", 4),
        new("Payments", "Low", 9), new("Accounts", "Low", 17), new("Search", "Low", 6), new("Reports", "Low", 21)
    ];
}

Named points

Give a point a Label to title its tooltip and add a label column to the table view.

Conference talksAudience size by track and day

RAZOR

<TwChart Title="Conference talks" Description="Audience size by track and day">
    <TwCategoricalScatterChart Points="@_talks" XTitle="Day" YTitle="Track" ValueTitle="Audience" />
</TwChart>

CSHARP

@code {
    private readonly ChartCategoricalPoint[] _talks =
    [
        new("Monday", "Design", 180, "Design systems at scale"),
        new("Monday", "Engineering", 420, "Keynote: ten years of Blazor"),
        new("Tuesday", "Design", 95, "Color for everyone"),
        new("Tuesday", "Engineering", 260, "Rendering without script"),
        new("Tuesday", "Product", 140, "Roadmaps that survive"),
        new("Wednesday", "Product", 210, "Pricing experiments")
    ];
}

When to use

Use a categorical scatter plot when most combinations of the two categories are empty. The area of a dot, not its diameter, follows the value. For a full grid of values use TwMatrixChart or TwHeatmapChart.

Summary

Tooltips and the table view give the two categories and the value of each point.

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.

TwCategoricalScatterChart

Basic usage

Sparse combinations

Named points

When to use

Summary

Shared features

Keyboard navigation