Charts

TwBumpChart

TwBumpChart is a Blazor bump chart that tracks how series rank against each other across categories, with the highest value ranked first.

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

TwBumpChart plots rank instead of value: in each category the series with the highest value is ranked first. Lines cross where one series overtakes another. Each line is labelled at its end, and tooltips give both the rank and the value.

Channel ranking by month

RAZOR

<TwChart Title="Channel ranking by month">
    <TwBumpChart 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, 30, 61, 58, 70]),
        new("Paid", [30, 34, 51, 45, 62, 49]),
        new("Referral", [12, 40, 41, 19, 26, 55])
    ];
}

Labels

RankLabel renames the rank in tooltips.

Channel ranking by month

RAZOR

<TwChart Title="Channel ranking by month">
    <TwBumpChart Categories="@_months" Series="@_visitors" RankLabel="Position" />
</TwChart>

When to use

A bump chart hides how far apart the values are. When the size of the lead matters, use TwLineChart.

Summary

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

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.