SwarmPlotCanvas

@nivo/swarmplotcanvas

A variation around the SwarmPlot component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions.

You can optionally enable a voronoi mesh to capture user's interactions, using the useMesh property.

Even if the canvas implementation is faster, please note that if you have a lot of nodes calculating the underlying simulation will involve a lot of computing and will affect performance.

The responsive alternative of this component is ResponsiveSwarmPlotCanvas.

562 nodes
Actions Logs
Start interacting with the chart to log actions
Base
object[]required

Chart data.

string | Functionoptionaldefault:'id'

Property used to retrieve the node's unique identifier.

string | Functionoptionaldefault:'value'

Property used to retrieve the node's value.

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

string[]required

Available groups.

string | Functionoptionaldefault:'group'

Propety used to group nodes, must return a group which is available in the groups property.

number | object | Functionoptionaldefault:6

How to compute node size, static or dynamic.

numberoptionaldefault:2
px

Spacing between nodes.

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
Layout
Style
Customization
Grid & Axes
Interactivity
Motion