Charts

TwSankeyChart

TwSankeyChart is a Blazor Sankey diagram: nodes in columns 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

TwSankeyChart arranges ChartGraphNode values in columns and joins them with a ribbon for every ChartGraphLink, as thick as its value. A node sits to the right of every node that flows into it, and is as tall as what flows through it. Links refer to nodes by Id.

Energy flowGigawatt hours

RAZOR

<TwChart Title="Energy flow" Description="Gigawatt hours">
    <TwSankeyChart Nodes="@_energyNodes" Links="@_energyLinks" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _energyNodes =
    [
        new("solar", "Solar"), new("wind", "Wind"), new("gas", "Gas"),
        new("grid", "Grid"),
        new("homes", "Homes"), new("industry", "Industry")
    ];
    
    private readonly ChartGraphLink[] _energyLinks =
    [
        new("solar", "grid", 25), new("wind", "grid", 40), new("gas", "grid", 35),
        new("grid", "homes", 45), new("grid", "industry", 55)
    ];
}

Several stages

Columns are worked out from the links, so a longer chain simply adds columns. This budget splits income into categories and then into line items, with everything it does not spend flowing to savings.

Where a monthly salary goesPounds

RAZOR

<TwChart Title="Where a monthly salary goes" Description="Pounds">
    <TwSankeyChart Nodes="@_budgetNodes" Links="@_budgetLinks" ValueFormat="C0" SourceHeader="From" TargetHeader="To" ValueHeader="Amount" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _budgetNodes =
    [
        new("salary", "Salary"), new("bonus", "Bonus"),
        new("income", "Income"),
        new("housing", "Housing"), new("living", "Living"), new("savings", "Savings"),
        new("rent", "Rent"), new("energy", "Energy"), new("food", "Food"), new("travel", "Travel"), new("leisure", "Leisure")
    ];
    
    private readonly ChartGraphLink[] _budgetLinks =
    [
        new("salary", "income", 3200), new("bonus", "income", 400),
        new("income", "housing", 1400), new("income", "living", 1300), new("income", "savings", 900),
        new("housing", "rent", 1150), new("housing", "energy", 250),
        new("living", "food", 520), new("living", "travel", 340), new("living", "leisure", 440)
    ];
}

Setting the column

A node with nothing flowing into it starts in the first column. Set its Stage to move it further right, as with the visitors who join this funnel at the basket from a saved link.

Checkout funnelSessions last week

RAZOR

<TwChart Title="Checkout funnel" Description="Sessions last week">
    <TwSankeyChart Nodes="@_funnelNodes" Links="@_funnelLinks" ValueHeader="Sessions" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _funnelNodes =
    [
        new("home", "Home page"), new("product", "Product page"),
        new("saved", "Saved link", Stage: 1),
        new("basket", "Basket"), new("paid", "Paid"), new("left", "Abandoned")
    ];
    
    private readonly ChartGraphLink[] _funnelLinks =
    [
        new("home", "product", 5200), new("product", "basket", 1900), new("saved", "basket", 600),
        new("basket", "paid", 1400), new("basket", "left", 1100)
    ];
}

When to use

Use a Sankey diagram to show how a quantity divides and recombines as it moves through stages. Links without a positive value 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. The arrow keys visit the nodes first, then the links.

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.

TwSankeyChart

Basic usage

Several stages

Setting the column

When to use

Summary

Shared features

Keyboard navigation