Charts

TwTreemapChart

TwTreemapChart is a Blazor treemap: rectangles that tile the plot, each sized by its value, showing many parts of a whole compactly.

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

TwTreemapChart tiles the plot with rectangles sized by value. Tiles are laid out largest first and kept close to square so their areas are easy to compare. Tiles with room show their label; every tile has a tooltip.

Traffic by source

RAZOR

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

CSHARP

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

Many values

A treemap copes with far more parts than a pie, which makes it a good fit for long-tailed data.

Disk usage by folder

RAZOR

<TwChart Title="Disk usage by folder">
    <TwTreemapChart Data="@_folders" ValueFormat="0 GB" LabelHeader="Folder" ValueHeader="Size" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _folders =
    [
        new("Videos", 180), new("Photos", 120), new("Projects", 75), new("Music", 48), new("Documents", 30),
        new("Downloads", 22), new("Backups", 16), new("Apps", 12), new("Fonts", 5), new("Temp", 3)
    ];
}

Values

Negative and zero values have no area, so they are left out of the plot. They still appear in the table view.

Summary

Tooltips and the table view give the value of each tile. Tooltips also give its share of the whole.

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.