Charts

TwChordDiagramChart

TwChordDiagramChart is a Blazor chord diagram: nodes as arcs around a circle joined by ribbons as thick as the flow between them.

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

TwChordDiagramChart arranges ChartGraphNode values as arcs around a circle and draws a ribbon across it for every ChartGraphLink. An arc is as long as the total of its links and a ribbon is as thick as its link's value. Links refer to nodes by Id.

Cross-team collaborationShared projects last year

Design
Engineering
Sales

RAZOR

<TwChart Title="Cross-team collaboration" Description="Shared projects last year">
    <TwChordDiagramChart Nodes="@_teams" Links="@_projects" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _teams = [new("design", "Design"), new("eng", "Engineering"), new("sales", "Sales")];
    
    private readonly ChartGraphLink[] _projects = [new("design", "eng", 8), new("eng", "sales", 5), new("sales", "design", 3)];
}

Flows in both directions

Add a link each way to show a two-way flow. Each ribbon takes the color of the node it starts at, so the mix of colors arriving at an arc shows where its traffic comes from.

Customers switching between plansAccounts that changed plan last year

Free
Team
Business
Enterprise

RAZOR

<TwChart Title="Customers switching between plans" Description="Accounts that changed plan last year">
    <TwChordDiagramChart Nodes="@_plans" Links="@_switches" SourceHeader="From" TargetHeader="To" ValueHeader="Accounts" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _plans = [new("free", "Free"), new("team", "Team"), new("business", "Business"), new("enterprise", "Enterprise")];
    
    private readonly ChartGraphLink[] _switches =
    [
        new("free", "team", 420), new("team", "free", 90),
        new("team", "business", 260), new("business", "team", 70),
        new("business", "enterprise", 110), new("enterprise", "business", 25),
        new("free", "business", 60)
    ];
}

Dominant links

Because thickness follows value, one heavy relationship stands out from many light ones at a glance.

Trade between regionsBillions of pounds

Europe
North America
Asia
South America
Africa

RAZOR

<TwChart Title="Trade between regions" Description="Billions of pounds">
    <TwChordDiagramChart Nodes="@_regions" Links="@_trade" ValueFormat="C0" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _regions =
    [
        new("eu", "Europe"), new("na", "North America"), new("as", "Asia"), new("sa", "South America"), new("af", "Africa")
    ];
    
    private readonly ChartGraphLink[] _trade =
    [
        new("eu", "na", 620), new("as", "na", 540), new("as", "eu", 480),
        new("na", "sa", 90), new("eu", "af", 70), new("as", "af", 55), new("sa", "eu", 40)
    ];
}

When to use

Use a chord diagram to compare weighted flows among a handful of nodes. Nodes are named in the legend, in the colors of their arcs. Links that name a missing node, or join a node to itself, are left out.

Summary

Tooltips and the table view give the source, target and value of each link. Tooltips also give the total of each node.

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.

TwChordDiagramChart

Basic usage

Flows in both directions

Dominant links

When to use

Summary

Shared features

Keyboard navigation