Charts

TwSunburstChart

TwSunburstChart is a Blazor sunburst chart: a tree drawn as rings, each segment sized by its share of the whole.

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

TwSunburstChart draws a tree of ChartHierarchyNode values as rings. The top-level nodes form the inner ring and each node's children sit around it in the next ring out, every segment sized by its share of the whole.

Sales by region and productThousands of pounds

North
South

RAZOR

<TwChart Title="Sales by region and product" Description="Thousands of pounds">
    <TwSunburstChart Roots="@_sales" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _sales =
    [
        new("North", Children: [new("Hardware", 38), new("Software", 24)]),
        new("South", Children: [new("Hardware", 28), new("Software", 16)])
    ];
}

Three rings

Each top-level node has its own color and its descendants are lighter tints of it, so a branch reads as one family all the way out. A larger Height leaves more segments room for their names.

Website visits by channel, source and device

Search
Social
Direct

RAZOR

<TwChart Title="Website visits by channel, source and device">
    <TwSunburstChart Roots="@_visits" LabelHeader="Segment" ValueHeader="Visits" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _visits =
    [
        new("Search", Children:
        [
            new("Organic", Children: [new("Mobile", 4200), new("Desktop", 3100)]),
            new("Paid", Children: [new("Mobile", 1800), new("Desktop", 900)])
        ]),
        new("Social", Children:
        [
            new("Video", Children: [new("Mobile", 2600), new("Desktop", 400)]),
            new("Posts", Children: [new("Mobile", 1500), new("Desktop", 700)])
        ]),
        new("Direct", Children: [new("Mobile", 1900), new("Desktop", 2400)])
    ];
}

Uneven branches

Branches need not be the same depth. A node without children simply ends at its own ring, leaving the rings beyond it empty.

Monthly household spendingPounds

Housing
Food
Transport
Savings

RAZOR

<TwChart Title="Monthly household spending" Description="Pounds">
    <TwSunburstChart Roots="@_spending" ValueFormat="C0" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _spending =
    [
        new("Housing", Children: [new("Rent", 1150), new("Energy", 180), new("Water", 45)]),
        new("Food", Children: [new("Groceries", 420), new("Eating out", Children: [new("Lunches", 90), new("Dinners", 140)])]),
        new("Transport", Children: [new("Rail", 210), new("Car", 130)]),
        new("Savings", 400)
    ];
}

When to use

Use a sunburst chart to show shares at every level of a tree. Names that do not fit are cut short or left off. Nodes with no value are left out.

Summary

Tooltips and the table view give the path and the value of each segment. Tooltips also give its share of the whole. The arrow keys visit a segment, then its children, then the next segment.

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.

TwSunburstChart

Basic usage

Three rings

Uneven branches

When to use

Summary

Shared features

Keyboard navigation