NetworkChart: Blazor network chart component

Examples

Basic

Each GraphLink joins two node names; nodes grow with their number of links, and their names sit to the right.

Service dependencies

website/Examples/Charts/NetworkChartBasicExample.razor Source

Groups

Nodes gives each GraphNode a Group, which sets its colour and a legend key; a link's Value sets its thickness.

Edge Core Data

website/Examples/Charts/NetworkChartGroupsExample.razor Source

Playground

Service dependencies

ShowLabels

ShowLegend

Iterations

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<NetworkChart Title="Service dependencies" Links="@_dependencies" />

@code {
    private readonly GraphLink[] _dependencies =
    [
        new("Gateway", "Auth"),
        new("Gateway", "Projects"),
        new("Gateway", "Search"),
        new("Gateway", "Deployments"),
        new("Projects", "Storage"),
        new("Projects", "Auth"),
        new("Projects", "Database"),
        new("Search", "Index"),
        new("Search", "Database"),
        new("Deployments", "Builder"),
        new("Deployments", "Storage"),
        new("Deployments", "Notifications"),
        new("Builder", "Registry"),
        new("Notifications", "Mailer"),
        new("Auth", "Database"),
    ];
}

API

<NetworkChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
GroupColors IReadOnlyDictionary<string, string>
= null
Optional colour per group name (any CSS colour); other groups cycle through the theme palette.
Iterations int
= 300
Simulation steps run before drawing (0 to 1000). More steps settle large graphs further.
Links IReadOnlyList<GraphLink>
= []
The connections. Node names come from Source and Target; links to the same node or without a positive Value are skipped.
Nodes IReadOnlyList<GraphNode>
= null
Optional node list: sets each node's Group (its colour) and adds nodes that have no links.
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.
ShowLabels bool
= true
Print each node's name to its right.
ShowLegend bool
= true
Show a colour key for the node groups under the chart.
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.
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for link values in 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.
GroupColors	IReadOnlyDictionary<string, string>	null	Optional colour per group name (any CSS colour); other groups cycle through the theme palette.
Iterations	int	300	Simulation steps run before drawing (0 to 1000). More steps settle large graphs further.
Links	IReadOnlyList<GraphLink>	[]	The connections. Node names come from Source and Target; links to the same node or without a positive Value are skipped.
Nodes	IReadOnlyList<GraphNode>	null	Optional node list: sets each node's Group (its colour) and adds nodes that have no links.
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.
ShowLabels	bool	true	Print each node's name to its right.
ShowLegend	bool	true	Show a colour key for the node groups under the chart.
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.
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for link values in 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.