ChordChart: Blazor chord chart component

Examples

Basic

Each GraphLink joins Source and Target with a Value; node names come from the links, and a link counts once on each of its nodes.

Calls between services (millions per day)

website/Examples/Charts/ChordChartBasicExample.razor Source

Directed

Directed="true" draws each ribbon as an arrow from Source to Target; ShowValues prints each node's total and NodeColors maps a node to any CSS colour.

Plan changes last quarter (customers)

website/Examples/Charts/ChordChartDirectedExample.razor Source

Playground

Calls between services (millions per day)

Directed

PadAngle

ShowValues

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<ChordChart
            Title="Calls between services (millions per day)"
            AspectRatio="1.4"
            Links="@_calls" />

@code {
    private readonly GraphLink[] _calls =
    [
        new("Gateway", "Auth", 42),
        new("Gateway", "Projects", 35),
        new("Gateway", "Search", 18),
        new("Projects", "Storage", 27),
        new("Projects", "Auth", 12),
        new("Search", "Storage", 9),
        new("Deployments", "Storage", 14),
        new("Deployments", "Projects", 11),
        new("Notifications", "Auth", 6),
        new("Deployments", "Notifications", 8),
    ];
}

API

<ChordChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Directed bool
= false
When true, each ribbon is an arrow from Source to Target and a node's arc counts what it sends and receives; when false, a link is one two-way relation.
Links IReadOnlyList<GraphLink>
= []
The relations. Node names come from Source and Target; links to the same node or without a positive Value are skipped.
NodeColors IReadOnlyDictionary<string, string>
= null
Optional colour per node name (any CSS colour); other nodes cycle through the theme palette.
PadAngle double
= 0.04
Gap between neighbouring arcs, in radians.
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
= false
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} calls".
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
AspectRatio	double	1.78	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
Directed	bool	false	When true, each ribbon is an arrow from Source to Target and a node's arc counts what it sends and receives; when false, a link is one two-way relation.
Links	IReadOnlyList<GraphLink>	[]	The relations. Node names come from Source and Target; links to the same node or without a positive Value are skipped.
NodeColors	IReadOnlyDictionary<string, string>	null	Optional colour per node name (any CSS colour); other nodes cycle through the theme palette.
PadAngle	double	0.04	Gap between neighbouring arcs, in radians.
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	false	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} calls".
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.