TwDotPlotChart

TwDotPlotChart places one dot per series on a shared line for each category, so values are compared by position rather than length. Because nothing is measured from a baseline, the scale can zoom in on the range the data occupies, which makes small differences visible.

<TwChart Title="Revenue by region and year" Description="Thousands of pounds">
    <TwDotPlotChart Categories="@_regions" Series="@_yearly" />
</TwChart>

@code {
    private readonly string[] _regions = ["North", "South", "East", "West"];
    
    private readonly ChartSeries[] _yearly =
    [
        new("2024", [360, 290, 240, 330]),
        new("2025", [420, 310, 275, 380])
    ];
}

Set Vertical to place the categories along the bottom with values running upwards.

<TwChart Title="Revenue by region and year">
    <TwDotPlotChart Categories="@_regions" Series="@_yearly" Vertical="true" />
</TwChart>

To draw attention to the gap between the dots, use TwDumbbellChart, which joins them with a bar. To show every raw observation in a group, use TwStripPlotChart.

Tooltips and the table view give the value of every series for each category.

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.