Charts

TwQuadrantChart

TwQuadrantChart is a Blazor quadrant chart: a scatter plot split into four labelled regions by two thresholds, for sorting items into groups.

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

TwQuadrantChart is a scatter plot divided into four regions by a horizontal and a vertical line. Points are labelled by default, since the reader wants to know which item landed where.

Backlog priorities

RAZOR

<TwChart Title="Backlog priorities">
    <TwQuadrantChart Series="@_backlog" XTitle="Effort" YTitle="Impact" />
</TwChart>

CSHARP

@code {
    private readonly ChartPointSeries[] _backlog =
    [
        new("Features", [new(2, 8, "Search"), new(8, 9, "Billing"), new(3, 3, "Themes"), new(7, 2, "Importer"), new(4, 6, "Exports")])
    ];
}

Quadrant labels

Name each region with TopLeftLabel, TopRightLabel, BottomLeftLabel and BottomRightLabel.

Backlog priorities

RAZOR

<TwChart Title="Backlog priorities">
    <TwQuadrantChart Series="@_backlog" XTitle="Effort" YTitle="Impact"
                     TopLeftLabel="Quick wins" TopRightLabel="Major projects"
                     BottomLeftLabel="Fill-ins" BottomRightLabel="Reconsider" />
</TwChart>

Thresholds

The dividers sit in the middle of each axis unless you set XThreshold and YThreshold to the values that separate the groups.

Backlog priorities

RAZOR

<TwChart Title="Backlog priorities">
    <TwQuadrantChart Series="@_backlog" XTitle="Effort" YTitle="Impact" XThreshold="3.5" YThreshold="7"
                     TopLeftLabel="Quick wins" TopRightLabel="Major projects"
                     BottomLeftLabel="Fill-ins" BottomRightLabel="Reconsider" />
</TwChart>

Inherited options

Everything on TwScatterChart is available, including bubble sizes and ShowLabels.

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.

TwQuadrantChart

Basic usage

Quadrant labels

Thresholds

Inherited options

Summary

Shared features

Keyboard navigation