Charts

TwStreamGraphChart

TwStreamGraphChart is a Blazor stream graph: stacked layers that flow around a central line to show how the make-up of a total shifts over time.

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

TwStreamGraphChart stacks one smooth layer per series around the middle of the plot instead of on a baseline. The thickness of a layer is its value, and the outline of the whole stream is the total.

Visits by sourceThousands per month

RAZOR

<TwChart Title="Visits by source" Description="Thousands per month">
    <TwStreamGraphChart Categories="@_months" Series="@_sources" />
</TwChart>

CSHARP

@code {
    private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    
    private readonly ChartSeries[] _sources =
    [
        new("Search", [24, 28, 26, 34, 38, 41]),
        new("Direct", [16, 18, 22, 20, 19, 23]),
        new("Social", [10, 14, 12, 18, 27, 22])
    ];
}

Rise and fall

A stream graph is at its best when series come and go. Here each genre swells and fades in turn, which a stacked area chart would bury under a climbing baseline.

Listening hours by genreMillions of hours per year

RAZOR

<TwChart Title="Listening hours by genre" Description="Millions of hours per year">
    <TwStreamGraphChart Categories="@_years" Series="@_genres" CategoryHeader="Year" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly string[] _years = ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"];
    
    private readonly ChartSeries[] _genres =
    [
        new("Rock", [42, 40, 36, 31, 27, 24, 22, 20, 19, 18]),
        new("Pop", [35, 38, 44, 48, 46, 41, 37, 35, 34, 33]),
        new("Hip hop", [12, 18, 27, 36, 45, 52, 50, 44, 39, 36]),
        new("Electronic", [8, 9, 11, 15, 22, 31, 40, 46, 43, 38]),
        new("Podcasts", [0, 1, 3, 6, 12, 20, 29, 37, 48, 58])
    ];
}

Hiding layers

Click a legend entry to remove its layer; the rest close up around the middle. Set InteractiveLegend to false to keep every layer in place.

Visits by source

Search
Direct
Social

RAZOR

<TwChart Title="Visits by source">
    <TwStreamGraphChart Categories="@_months" Series="@_sources" InteractiveLegend="false" Height="ChartHeight.Small" />
</TwChart>

When to use

Use a stream graph for the changing make-up of a total. Only thickness carries meaning; a layer's height on the plot does not. Missing and negative values count as zero. When exact totals matter, use a stacked TwAreaChart.

Summary

Tooltips and the table view give the value of every series for each category.

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.

TwStreamGraphChart

Basic usage

Rise and fall

Hiding layers

When to use

Summary

Shared features

Keyboard navigation