Data & ChartsPro

Network Chart

Network chart for relations: a force graph, an arc diagram, a tree and a radial tree.

Usage

Network Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import {
  NetworkChart,
  NetworkChartProps,
  NetworkChartVariant,
} from "@wunderui/react"

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

An organisation chart as a tree.

Teams and who they report to

Prop	Type	Default
variant	"force-graph" \| "arc-diagram" \| "tree" \| "radial-tree"	"force-graph"
nodes · links	{ id, label?, group?, size? }[] · { source, target, value? }[]	—
tree	{ name, children? }	—
groups	{ key, label?, color? }[]	—
state	"ready" \| "loading" \| "empty" \| "error"	"ready"
hiddenSeries · animate · animationKey	string[] · boolean · string \| number	—
activeIndex	number \| null	—
animate	boolean	—
animationKey	string \| number	—
className	string	—
defaultActiveIndex	number \| null	—
description	string	—
height	number	—
hiddenSeries	readonly string[]	—
label	string	—
links	readonly NetworkLink[]	[]
nodes	readonly NetworkNode[]	[]
onActiveIndexChange	(index: number \| null) => void	—
onRetry	() => void	—
width	number	—

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.