Charts

TwRadialBarChart

TwRadialBarChart is a Blazor radial bar chart: bars bent around a circle, one ring per value, each sweeping further for larger values.

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

TwRadialBarChart bends each bar around a circle, one ring per value, over a track that shows the full scale. Labels sit at the start of each ring.

Traffic by source

RAZOR

<TwChart Title="Traffic by source">
    <TwRadialBarChart Data="@_sources" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _sources =
    [
        new("Search", 430),
        new("Direct", 260),
        new("Social", 170),
        new("Email", 90),
        new("Referral", 50)
    ];
}

Progress towards a goal

With values on a common scale, such as percentages, the rings read as progress.

Course completion

RAZOR

<TwChart Title="Course completion">
    <TwRadialBarChart Data="@_progress" ValueFormat="0\%" LabelHeader="Module" ValueHeader="Complete" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _progress =
    [
        new("Basics", 100),
        new("Layouts", 80),
        new("Forms", 55),
        new("Testing", 20)
    ];
}

When to use

Outer rings are longer than inner rings for the same value, so read the angle swept, not the length. For precise comparison use TwBarChart.

Summary

Tooltips and the table view give the value of each ring.

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.