Charts

TwCircularTreemapChart

TwCircularTreemapChart is a Blazor circle packing chart: a circle per leaf of a tree, sized by value and packed inside its parent's circle.

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

TwCircularTreemapChart takes a tree of ChartHierarchyNode values. Every leaf becomes a circle whose area follows its Value, packed inside a circle for its parent. Each top-level node has its own color and legend entry.

Storage by folderGigabytes

Documents
Media

RAZOR

<TwChart Title="Storage by folder" Description="Gigabytes">
    <TwCircularTreemapChart Roots="@_folders" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _folders =
    [
        new("Documents", Children: [new("Reports", 32), new("Notes", 18), new("Invoices", 9)]),
        new("Media", Children: [new("Images", 45), new("Audio", 20), new("Video", 64)])
    ];
}

Deeper trees

Nodes nest to any depth, and every level gets its own enclosing circle, so the grouping reads at a glance. A larger Height gives small circles room for their names.

Headcount by division, department and team

Product
Commercial
Operations

RAZOR

<TwChart Title="Headcount by division, department and team">
    <TwCircularTreemapChart Roots="@_organisation" LabelHeader="Team" ValueHeader="People" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _organisation =
    [
        new("Product", Children:
        [
            new("Engineering", Children: [new("Platform", 24), new("Web", 18), new("Mobile", 14), new("Data", 9)]),
            new("Design", Children: [new("Research", 6), new("Interface", 11)])
        ]),
        new("Commercial", Children:
        [
            new("Sales", Children: [new("Enterprise", 16), new("Mid-market", 12), new("Partners", 5)]),
            new("Marketing", Children: [new("Brand", 7), new("Growth", 10)])
        ]),
        new("Operations", Children: [new("Finance", 8), new("People", 6), new("Legal", 3)])
    ];
}

A flat list

Without children every node is a leaf, and the chart becomes a packed bubble chart: one circle and one color per value.

Population of the largest citiesMillions

RAZOR

<TwChart Title="Population of the largest cities" Description="Millions">
    <TwCircularTreemapChart Roots="@_cities" LabelHeader="City" ValueHeader="Population" ValueFormat="0.0" ShowLegend="false" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _cities =
    [
        new("Tokyo", 37.2), new("Delhi", 33.8), new("Shanghai", 29.9), new("Dhaka", 23.9),
        new("Cairo", 22.6), new("Lagos", 16.5), new("London", 9.7), new("Sydney", 5.2)
    ];
}

When to use

Circles leave gaps, so sizes are harder to compare than on TwConvexTreemapChart; in return the nesting is easier to see. A name too long for its circle is cut short. Nodes with no value are left out.

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.

TwCircularTreemapChart

Basic usage

Deeper trees

A flat list

When to use

Summary

Shared features

Keyboard navigation