Charts

TwBumpAreaChart

TwBumpAreaChart is a Blazor bump area chart: a band per series that is as thick as its value and moves as its rank changes.

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

TwBumpAreaChart draws a band for each series. At every category the bands are stacked from the largest value at the top to the smallest at the bottom, so a band climbs when its series overtakes another and its thickness shows by how much it leads.

Market share by platformPercent

RAZOR

<TwChart Title="Market share by platform" Description="Percent">
    <TwBumpAreaChart Categories="@_years" Series="@_platforms" />
</TwChart>

CSHARP

@code {
    private readonly string[] _years = ["2021", "2022", "2023", "2024", "2025"];
    
    private readonly ChartSeries[] _platforms =
    [
        new("Atlas", [42, 38, 33, 30, 26]),
        new("Beacon", [30, 32, 36, 39, 44]),
        new("Comet", [28, 30, 31, 31, 30])
    ];
}

Changing leaders

With more series and more crossings the chart tells the story of a race. Where a TwBumpChart shows only the order, the band thickness here also shows when the leader was far ahead and when the field was close.

Browser usagePercent of sessions

RAZOR

<TwChart Title="Browser usage" Description="Percent of sessions">
    <TwBumpAreaChart Categories="@_quarters" Series="@_browsers" CategoryHeader="Quarter" ValueFormat="0'%'" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly string[] _quarters = ["Q1 23", "Q2 23", "Q3 23", "Q4 23", "Q1 24", "Q2 24", "Q3 24", "Q4 24"];
    
    private readonly ChartSeries[] _browsers =
    [
        new("Falcon", [38, 36, 33, 30, 27, 25, 22, 20]),
        new("Otter", [24, 26, 29, 32, 35, 37, 40, 43]),
        new("Lynx", [20, 19, 19, 18, 17, 17, 16, 15]),
        new("Heron", [12, 13, 12, 13, 14, 13, 14, 13]),
        new("Wren", [6, 6, 7, 7, 7, 8, 8, 9])
    ];
}

Late arrivals

Use null where a series has no value. Its band starts, stops or breaks there, and the other bands close the gap.

Revenue by product lineMillions of pounds

RAZOR

<TwChart Title="Revenue by product line" Description="Millions of pounds">
    <TwBumpAreaChart Categories="@_years" Series="@_products" ValueFormat="C1" />
</TwChart>

CSHARP

@code {
    private readonly ChartSeries[] _products =
    [
        new("Hardware", [4.2, 4.0, 3.6, 3.1, 2.8]),
        new("Software", [2.1, 2.9, 3.8, 4.6, 5.2]),
        new("Services", [null, null, 0.9, 1.8, 3.4])
    ];
}

When to use

Use a bump area chart when both the order of the series and the size of the lead matter. When only the order matters, TwBumpChart is simpler. Negative values count as zero.

Summary

Tooltips and the table view give the value of every series for each category. Tooltips also give the rank of each series. The arrow keys move down each category in rank order, then on to the next.

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.

TwBumpAreaChart

Basic usage

Changing leaders

Late arrivals

When to use

Summary

Shared features

Keyboard navigation