Charts

TwStripPlotChart

TwStripPlotChart is a Blazor strip plot that draws every observation as a dot, one strip per group. Add jitter to separate overlaps.

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

TwStripPlotChart draws every observation in a ChartSample as a dot along the value axis, one strip per group, so the raw spread and any clusters are visible.

Response times by serviceMilliseconds

RAZOR

<TwChart Title="Response times by service" Description="Milliseconds">
    <TwStripPlotChart Samples="@_services" />
</TwChart>

CSHARP

@code {
    private readonly ChartSample[] _services =
    [
        new("Search", [112, 120, 131, 135, 138, 142, 144, 149, 151, 153, 290]),
        new("Checkout", [156, 158, 160, 163, 167, 170, 172, 176, 181, 185]),
        new("Reports", [190, 196, 204, 215, 228, 240, 262, 150, 310])
    ];
}

Jitter

Set Jitter to nudge dots sideways so overlapping values stay visible. The nudge is repeatable: the same data always draws the same picture.

Response times by service

RAZOR

<TwChart Title="Response times by service">
    <TwStripPlotChart Samples="@_services" Jitter="true" />
</TwChart>

Horizontal

Set Horizontal to list the groups down the side.

Response times by service

RAZOR

<TwChart Title="Response times by service">
    <TwStripPlotChart Samples="@_services" Horizontal="true" Height="ChartHeight.Small" />
</TwChart>

When to use

A strip plot suits small samples. For large ones, summarise with TwBoxPlotChart or TwHistogramChart.

Summary

Tooltips and the table view give the count, minimum, lower quartile, median, upper quartile and maximum of each group.

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.

TwStripPlotChart

Basic usage

Jitter

Horizontal

When to use

Summary

Shared features

Keyboard navigation