RELATIONSHIP / CHART GUIDE

Network Graph

A network graph is a diagram that displays relationships (edges) between entities (nodes).

01 / EXPLORE

See it in action.

Switch to Code to copy an example.

About Network Graph

A network graph is a diagram that displays relationships (edges) between entities (nodes). Through the connections of nodes and edges, it intuitively represents complex network structures. Each node represents an entity, and each edge represents a relationship or connection between two nodes.

02 / CONFIGURE

Make it yours.

The properties available for this chart.

Configuration Options

Property	Type	Required	Description
`type`	`string`	required	Value must be "network-graph".
`data`	`Object`	required	Chart data, containing nodes and edges fields.
`data.nodes`	`Object[]`	required	Node array, each node represents an entity.
`data.nodes.name`	`string`	required	Node name, used as the unique identifier.
`data.edges`	`Object[]`	required	Edge array, each edge represents a relationship between two nodes.
`data.edges.source`	`string`	required	Source node name, pointing to the name property of a node.
`data.edges.target`	`string`	required	Target node name, pointing to the name property of a node.
`data.edges.name`	`string`	optional	Edge label, used to describe the relationship between two nodes.
`layout`	`'force' \| 'circular' \| 'grid' \| 'radial' \| 'concentric' \| 'dagre'`	optional	Layout algorithm, default is "force".
`title`	`string`	optional	Chart title.
`theme`	`BuiltinThemeName \| ThemeSpec`	optional	Built-in theme name or custom theme object; default is "default". See Documentation → Custom Themes.