Network

@nivo/networksvgisomorphicexperimental
svgcanvas

The responsive alternative of this component is ResponsiveNetwork.

181 nodes
Actions Logs
Start interacting with the chart to log actions
Base
numberrequired
Chart width.
numberrequired
Chart height.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvas
objectoptional
px
px
px
px
Chart margin.
Simulation
number | string | (link: Link) => numberoptional
Control links' distance.
numberoptionaldefault:10
Control how nodes repel each other.
numberoptionaldefault:1
Sets the minimum distance between nodes for the many-body force.
optionaldefault:Infinity
Sets the maximum distance between nodes for the many-body force.
numberoptionaldefault:90
Adjust the simulation quality.
Nodes
string | (node: Node) => stringoptional
Control nodes' color.
number | (node: Node) => numberoptionaldefault:0
px
Control nodes' border width.
string | object | (link: Link) => stringoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker
Control nodes' border color.
Links
number | (link: Link) => numberoptionaldefault:1
Control links' thickness.
string | (link: Link) => stringoptionaldefault:{"from":"source.color"}
inheritthemecustom
inherited property
source.color
modifiers
No modifier.
Control links' color.
Interactivity
Functionoptional
Custom tooltip component.
Customization
optionaldefault:['links', 'nodes']
Defines the order of layers and add custom layers.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvas
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvas
numberoptionaldefault:15
Motion damping.
supportsvgcanvas