Charts

TwConvexTreemapChart

TwConvexTreemapChart is a Blazor treemap for trees: cut-cornered tiles sized by value and grouped with the other leaves of their parent.

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

TwConvexTreemapChart takes a tree of ChartHierarchyNode values and fills the plot with a tile for every leaf, sized by its Value. The leaves of one parent sit together and share its color, with a gap around the group.

Budget by teamThousands of pounds

Product
Operations

RAZOR

<TwChart Title="Budget by team" Description="Thousands of pounds">
    <TwConvexTreemapChart Roots="@_budget" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _budget =
    [
        new("Product", Children: [new("Research", 36), new("Design", 24), new("Engineering", 58)]),
        new("Operations", Children: [new("Support", 22), new("Hosting", 18)])
    ];
}

Many leaves

Tiles are laid out largest first and kept close to square, so a long tail of small values stays readable. Tiles with room show their name; every tile has a tooltip.

Bundle size by packageKilobytes

Framework
Interface
Application

RAZOR

<TwChart Title="Bundle size by package" Description="Kilobytes">
    <TwConvexTreemapChart Roots="@_bundle" LabelHeader="Package" ValueHeader="Size" ValueFormat="#,0 kB" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _bundle =
    [
        new("Framework", Children: [new("Runtime", 412), new("Router", 96), new("Forms", 74), new("Http", 38)]),
        new("Interface", Children: [new("Components", 268), new("Icons", 142), new("Charts", 118), new("Theme", 44)]),
        new("Application", Children: [new("Pages", 186), new("Services", 92), new("Models", 31), new("Resources", 27), new("Utilities", 12)])
    ];
}

Three levels

Groups nest inside groups. Each level is inset a little further, and the tooltip and table view give a leaf's full path so two leaves with the same name stay distinct.

Sales by region, country and productMillions of pounds

Europe
Americas
Asia Pacific

RAZOR

<TwChart Title="Sales by region, country and product" Description="Millions of pounds">
    <TwConvexTreemapChart Roots="@_sales" ValueFormat="C1" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _sales =
    [
        new("Europe", Children:
        [
            new("United Kingdom", Children: [new("Hardware", 4.2), new("Software", 6.8), new("Services", 2.4)]),
            new("Germany", Children: [new("Hardware", 3.1), new("Software", 4.4)]),
            new("France", Children: [new("Hardware", 1.9), new("Software", 2.7)])
        ]),
        new("Americas", Children:
        [
            new("United States", Children: [new("Hardware", 7.5), new("Software", 11.3), new("Services", 5.1)]),
            new("Canada", Children: [new("Hardware", 1.4), new("Software", 2.2)])
        ]),
        new("Asia Pacific", Children: [new("Japan", 5.6), new("Australia", 3.3), new("Singapore", 1.8)])
    ];
}

When to use

Use a convex treemap to compare the leaves of a tree by size. Nodes with no value are left out. For a single flat list of values, TwTreemapChart does the same job without the grouping.

Summary

Tooltips and the table view give the path and the value of each leaf. 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.

TwConvexTreemapChart

Basic usage

Many leaves

Three levels

When to use

Summary

Shared features

Keyboard navigation