Charts

TwRadialHistogramChart

TwRadialHistogramChart is a Blazor radial histogram that wraps equal-width bins around a circle, for cyclical values such as hours or bearings.

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

TwRadialHistogramChart takes raw Values, groups them into equal ranges and wraps the bars around a circle starting at the top. It suits values that cycle, where the last range sits naturally beside the first.

Support tickets by hourHour of the day each ticket was opened

RAZOR

<TwChart Title="Support tickets by hour" Description="Hour of the day each ticket was opened">
    <TwRadialHistogramChart Values="@_ticketHours" BinCount="12" />
</TwChart>

CSHARP

@code {
    private readonly double[] _ticketHours =
    [
        0.5, 2.2, 6.8, 7.4, 8.1, 8.3, 8.6, 9.0, 9.1, 9.2, 9.4, 9.7, 9.9, 10.1, 10.3, 10.4, 10.8, 11.2, 11.5, 11.9,
        12.6, 13.1, 13.3, 13.8, 14.0, 14.2, 14.5, 14.9, 15.3, 15.6, 16.1, 16.4, 16.9, 17.5, 18.2, 19.6, 21.3, 23.9
    ];
}

Choosing the bins

BinCount sets how many ranges the values are split into, from 4 to 36. Match it to the cycle: 24 for hours of the day, 12 for months, 8 or 16 for compass points.

Support tickets by hourOne bar per hour

RAZOR

<TwChart Title="Support tickets by hour" Description="One bar per hour">
    <TwRadialHistogramChart Values="@_ticketHours" BinCount="24" RangeLabel="Hour" CountLabel="Tickets" Height="ChartHeight.Large" />
</TwChart>

Directions

Bearings are the classic use: with eight bins each bar is a compass sector, north at the top.

Wind directionBearing in degrees, hourly readings

RAZOR

<TwChart Title="Wind direction" Description="Bearing in degrees, hourly readings">
    <TwRadialHistogramChart Values="@_bearings" BinCount="8" RangeLabel="Bearing" CountLabel="Readings" ValueFormat="0°" />
</TwChart>

CSHARP

@code {
    private readonly double[] _bearings =
    [
        0, 12, 198, 205, 211, 214, 219, 222, 225, 228, 230, 233, 236, 240, 244, 247, 251, 255, 262, 268,
        271, 276, 284, 291, 302, 315, 334, 48, 95, 172, 186, 359.9
    ];
}

When to use

Use a radial histogram for values that cycle, such as hours or bearings. Bars grow from an inner ring so small counts stay visible. For values that do not wrap around, prefer TwHistogramChart, whose bars are easier to compare.

Summary

Tooltips and the table view give the range and count of each bin.

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.

TwRadialHistogramChart

Basic usage

Choosing the bins

Directions

When to use

Summary

Shared features

Keyboard navigation