Charts

TwHistogramChart

TwHistogramChart is a Blazor histogram that groups raw values into equal-width bins to reveal the shape of a distribution.

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

TwHistogramChart takes raw Values, groups them into equal-width bins and draws a column per bin showing how many values fall in it. You pass the observations; the chart does the counting.

Response timesMilliseconds

RAZOR

<TwChart Title="Response times" Description="Milliseconds">
    <TwHistogramChart Values="@_responseTimes" />
</TwChart>

CSHARP

@code {
    private readonly double[] _responseTimes =
    [
        112, 120, 131, 135, 138, 142, 144, 149, 151, 153, 156, 158, 160, 163, 167,
        170, 172, 176, 181, 185, 190, 196, 204, 215, 228, 240, 262, 290
    ];
}

Bin count

The number of bins follows Sturges' rule unless you set BinCount. Fewer bins show the overall shape; more show detail.

Response times

RAZOR

<TwChart Title="Response times">
    <TwHistogramChart Values="@_responseTimes" BinCount="12" />
</TwChart>

Labels

RangeLabel and CountLabel name the two columns of the table view, and CountLabel also titles the axis.

Response times

RAZOR

<TwChart Title="Response times">
    <TwHistogramChart Values="@_responseTimes" BinCount="6" RangeLabel="Milliseconds" CountLabel="Requests" Height="ChartHeight.Small" />
</TwChart>

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.

TwHistogramChart

Basic usage

Bin count

Labels

Summary

Shared features

Keyboard navigation