SankeyChart: Blazor sankey chart component

Examples

Basic

Each SankeyLink moves a Value from Source to Target; node names come from the links, and each node shows its total.

Signups by source, plan and status

website/Examples/Charts/SankeyChartBasicExample.razor Source

Node colours

NodeColors maps a node name to any CSS colour; ShowValues="false" keeps only the names, and AspectRatio sets the shape.

website/Examples/Charts/SankeyChartColorsExample.razor Source

Playground

Signups by source, plan and status

NodeWidth

NodePadding

Align SankeyAlign

ShowValues

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<SankeyChart
             Title="Signups by source, plan and status"
             Links="@_links" />

@code {
    private readonly SankeyLink[] _links =
    [
        new("Organic", "Starter", 320),
        new("Organic", "Pro", 180),
        new("Referral", "Pro", 140),
        new("Referral", "Starter", 90),
        new("Partner", "Enterprise", 70),
        new("Partner", "Pro", 60),
        new("Starter", "Active", 460),
        new("Starter", "Churned", 150),
        new("Pro", "Active", 330),
        new("Pro", "Churned", 50),
        new("Enterprise", "Active", 66),
        new("Enterprise", "Churned", 4),
    ];
}

API

<SankeyChart>

DaisyBlazor.Charts

Parameters

Align SankeyAlign
= SankeyAlign.Justify
How nodes without outgoing links are placed in columns.
AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Links IReadOnlyList<SankeyLink>
= []
The flows. Node names come from Source and Target; links without a positive Value are skipped. Cycles are not allowed.
NodeColors IReadOnlyDictionary<string, string>
= null
Optional colour per node name (any CSS colour); other nodes cycle through the theme palette.
NodePadding double
= 14
Vertical gap between nodes in the same column, in chart units.
NodeWidth double
= 12
Width of each node bar, in chart units.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues bool
= true
Print each node's total after its name.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for values in labels and tooltips, e.g. "{0:N0} customers".
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
Align	SankeyAlign	SankeyAlign.Justify	How nodes without outgoing links are placed in columns.
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Links	IReadOnlyList<SankeyLink>	[]	The flows. Node names come from Source and Target; links without a positive Value are skipped. Cycles are not allowed.
NodeColors	IReadOnlyDictionary<string, string>	null	Optional colour per node name (any CSS colour); other nodes cycle through the theme palette.
NodePadding	double	14	Vertical gap between nodes in the same column, in chart units.
NodeWidth	double	12	Width of each node bar, in chart units.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues	bool	true	Print each node's total after its name.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for values in labels and tooltips, e.g. "{0:N0} customers".
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.