Charts

TwHeatmapChart

TwHeatmapChart is a Blazor heatmap: a grid of cells whose color intensity shows the value where a row and a column meet.

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

TwHeatmapChart lays each series out as a row and each category as a column, and shades the cell where they meet by its value. Intensity uses a single hue, so darker always means more.

Support tickets by day and shift

RAZOR

<TwChart Title="Support tickets by day and shift">
    <TwHeatmapChart Categories="@_days" Series="@_shifts" />
</TwChart>

CSHARP

@code {
    private readonly string[] _days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
    
    private readonly ChartSeries[] _shifts =
    [
        new("Morning", [34, 28, 31, 25, 40]),
        new("Afternoon", [52, 47, 58, 49, 61]),
        new("Evening", [18, 22, 15, 27, 33])
    ];
}

Value labels

Set ShowValues to print each value on its cell. The text switches between dark and light ink to stay readable on any shade.

Support tickets by day and shift

RAZOR

<TwChart Title="Support tickets by day and shift">
    <TwHeatmapChart Categories="@_days" Series="@_shifts" ShowValues="true" />
</TwChart>

Labels

ValueLabel names the value in tooltips and CategoryHeader names the first column of the table view.

Support tickets by day and shift

RAZOR

<TwChart Title="Support tickets by day and shift">
    <TwHeatmapChart Categories="@_days" Series="@_shifts" ValueLabel="Tickets" CategoryHeader="Day" Height="ChartHeight.Small" />
</TwChart>

Summary

Tooltips and the table view give the value of every series for each category.

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.

TwHeatmapChart

Basic usage

Value labels

Labels

Summary

Shared features

Keyboard navigation