Charts

TwDendrogramChart

TwDendrogramChart is a Blazor dendrogram: a tree drawn from its root down to its leaves with a bracket joining every branch to its 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

TwDendrogramChart draws a tree of ChartHierarchyNode values from the root at the top to the leaves along the bottom. Leaves are named on the axis under the plot, and branches are named beside the point where they split.

Document clusters

RAZOR

<TwChart Title="Document clusters">
    <TwDendrogramChart Roots="@_documents" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _documents =
    [
        new("All documents", Children:
        [
            new("Research", Children: [new("Paper A", 1), new("Paper B", 1)]),
            new("Guides", Children: [new("Guide A", 1), new("Guide B", 1)])
        ])
    ];
}

Uneven depth

Leaves line up along the bottom whatever their depth, so a branch that splits again and again is easy to compare with one that ends early. This is the usual way to draw a classification.

A classification of vertebrates

RAZOR

<TwChart Title="A classification of vertebrates">
    <TwDendrogramChart Roots="@_vertebrates" LabelHeader="Group" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _vertebrates =
    [
        new("Vertebrates", Children:
        [
            new("Fish", Children: [new("Sharks", 1), new("Salmon", 1)]),
            new("Tetrapods", Children:
            [
                new("Amphibians", Children: [new("Frogs", 1), new("Newts", 1)]),
                new("Amniotes", Children:
                [
                    new("Mammals", Children: [new("Whales", 1), new("Bats", 1), new("Primates", 1)]),
                    new("Reptiles", Children: [new("Lizards", 1), new("Birds", 1)])
                ])
            ])
        ])
    ];
}

Values

Give leaves a Value and every branch shows the total of the leaves beneath it in its tooltip and in the table view.

Where the build time goesSeconds

RAZOR

<TwChart Title="Where the build time goes" Description="Seconds">
    <TwDendrogramChart Roots="@_buildSteps" LabelHeader="Step" ValueHeader="Seconds" ValueFormat="0 s" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _buildSteps =
    [
        new("Build", Children:
        [
            new("Compile", Children: [new("Library", 42), new("Docs", 31), new("Tests", 18)]),
            new("Verify", Children: [new("Unit", 64), new("Browser", 97)]),
            new("Package", 12)
        ])
    ];
}

Several roots

Pass more than one root to draw separate trees side by side.

Reporting lines

RAZOR

<TwChart Title="Reporting lines">
    <TwDendrogramChart Roots="@_teams" LabelHeader="Person" ShowTableToggle="false" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly ChartHierarchyNode[] _teams =
    [
        new("Asha", Children: [new("Ben", 1), new("Chloe", 1)]),
        new("Dmitri", Children: [new("Elena", 1), new("Farid", 1), new("Grace", 1)])
    ];
}

When to use

Use a dendrogram to show how items group into clusters, when the structure matters more than the sizes. To compare sizes use TwSunburstChart or TwConvexTreemapChart.

Summary

Tooltips and the table view give the path and the value of each node. The arrow keys visit the nodes from the root down, a branch before its children.

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.

TwDendrogramChart

Basic usage

Uneven depth

Values

Several roots

When to use

Summary

Shared features

Keyboard navigation