Charts

TwRangeChart

TwRangeChart is a Blazor range chart that draws a floating bar from a low value to a high value per category, such as salary bands.

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

TwRangeChart draws a floating bar from a low value to a high value for each category. Pass a list of ChartRange, each with a label, a low and a high.

Salary bandsThousands of pounds

RAZOR

<TwChart Title="Salary bands" Description="Thousands of pounds">
    <TwRangeChart Ranges="@_salaryBands" />
</TwChart>

CSHARP

@code {
    private readonly ChartRange[] _salaryBands =
    [
        new("Junior", 28, 38),
        new("Mid", 36, 52),
        new("Senior", 50, 72),
        new("Lead", 65, 90)
    ];
}

Vertical

Set Vertical to stand the bars up, which suits ranges over time such as daily temperatures.

Temperature this weekDegrees Celsius

RAZOR

<TwChart Title="Temperature this week" Description="Degrees Celsius">
    <TwRangeChart Ranges="@_temperatures" Vertical="true" LowLabel="Coldest" HighLabel="Warmest" LabelHeader="Day" ValueFormat="0°" />
</TwChart>

CSHARP

@code {
    private readonly ChartRange[] _temperatures =
    [
        new("Mon", 8, 15),
        new("Tue", 9, 17),
        new("Wed", 11, 19),
        new("Thu", 7, 14),
        new("Fri", 6, 12)
    ];
}

Labels

LowLabel and HighLabel name the two ends in tooltips and the table view, and LabelHeader names the first table column.

Summary

Tooltips and the table view give the low and high value of each range.

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.