Charts

TwNetworkDiagramChart

TwNetworkDiagramChart is a Blazor network diagram that arranges linked nodes close together and unrelated ones apart.

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

TwNetworkDiagramChart draws each ChartGraphNode as a named dot and each ChartGraphLink as a line. You give no positions: linked nodes pull together and all nodes push apart until the layout settles. Links refer to nodes by Id.

Service dependencies

RAZOR

<TwChart Title="Service dependencies">
    <TwNetworkDiagramChart Nodes="@_services" Links="@_dependencies" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _services = [new("ui", "UI"), new("api", "API"), new("auth", "Auth"), new("db", "Database"), new("cache", "Cache")];
    
    private readonly ChartGraphLink[] _dependencies =
    [
        new("ui", "api"), new("ui", "auth"), new("api", "auth"), new("api", "db"), new("api", "cache")
    ];
}

Hubs and clusters

The layout brings structure out of a plain list of links. Here two tightly linked groups separate, joined through the one node that belongs to both.

Who works with whomPeople who shared a project this year

RAZOR

<TwChart Title="Who works with whom" Description="People who shared a project this year">
    <TwNetworkDiagramChart Nodes="@_people" Links="@_collaborations" SourceHeader="Person" TargetHeader="Worked with" ValueHeader="Projects" Height="ChartHeight.Large" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _people =
    [
        new("ana", "Ana"), new("bo", "Bo"), new("cy", "Cy"), new("di", "Di"), new("eli", "Eli"),
        new("fay", "Fay"), new("gus", "Gus"), new("hal", "Hal"), new("ivy", "Ivy")
    ];
    
    private readonly ChartGraphLink[] _collaborations =
    [
        new("ana", "bo", 3), new("ana", "cy", 2), new("bo", "cy", 4), new("bo", "di", 1), new("cy", "di", 2),
        new("eli", "di", 2),
        new("eli", "fay", 3), new("eli", "gus", 1), new("fay", "gus", 2), new("gus", "hal", 4), new("fay", "hal", 1), new("hal", "ivy", 2)
    ];
}

A star

A single hub with many spokes settles into a star, and nodes with no links drift to the edge.

Office network

RAZOR

<TwChart Title="Office network">
    <TwNetworkDiagramChart Nodes="@_devices" Links="@_cables" ShowTableToggle="false" />
</TwChart>

CSHARP

@code {
    private readonly ChartGraphNode[] _devices =
    [
        new("switch", "Switch"), new("router", "Router"), new("printer", "Printer"), new("nas", "Storage"),
        new("desk1", "Desk 1"), new("desk2", "Desk 2"), new("desk3", "Desk 3"), new("spare", "Spare laptop")
    ];
    
    private readonly ChartGraphLink[] _cables =
    [
        new("switch", "router"), new("switch", "printer"), new("switch", "nas"),
        new("switch", "desk1"), new("switch", "desk2"), new("switch", "desk3")
    ];
}

When to use

Use a network diagram to show which nodes are connected. Only closeness carries meaning, not left, right, up or down, and the arrangement is the same every time for the same data. Links that name a missing node, or join a node to itself, are left out.

Summary

Tooltips and the table view give the source, target and value of each link.

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.

TwNetworkDiagramChart

Basic usage

Hubs and clusters

A star

When to use

Summary

Shared features

Keyboard navigation