Charts

TwDumbbellChart

TwDumbbellChart is a Blazor dumbbell chart: two dots per category joined by a bar, highlighting the gap between values such as before and after.

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

TwDumbbellChart is a dot plot whose dots are joined by a bar. The bar makes the size of the gap the first thing the reader sees, which suits before and after, target and actual, or any two groups.

Revenue change by regionThousands of pounds

RAZOR

<TwChart Title="Revenue change by region" Description="Thousands of pounds">
    <TwDumbbellChart Categories="@_regions" Series="@_yearly" />
</TwChart>

CSHARP

@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])
    ];
}

Vertical

Set Vertical to place the categories along the bottom.

Revenue change by region

RAZOR

<TwChart Title="Revenue change by region">
    <TwDumbbellChart Categories="@_regions" Series="@_yearly" Vertical="true" />
</TwChart>

More than two series

The bar always spans from the lowest to the highest value in the category, so a third series sits somewhere along it.

Monthly visitors by channelThousands

RAZOR

<TwChart Title="Monthly visitors by channel" Description="Thousands">
    <TwDumbbellChart Categories="@_months" Series="@_visitors" />
</TwChart>

CSHARP

@code {
    private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    
    private readonly ChartSeries[] _visitors =
    [
        new("Organic", [42, 48, 55, 61, 58, 70]),
        new("Paid", [30, 34, 31, 45, 52, 49]),
        new("Referral", [12, 15, 21, 19, 26, 33])
    ];
}

Summary

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

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.

TwDumbbellChart

Basic usage

Vertical

More than two series

Summary

Shared features

Keyboard navigation