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.

roll the dice
576 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 for non-responsive component.

numberoptional

Chart default width for responsive component.

numberrequired

Chart height for non-responsive component.

numberoptional

Chart default height for responsive component.

number (ms)optional

Debounce width/height updates for responsive component.

(dimensions: { width: number; height: number }) => voidoptional

A callback for when responsive component is resized.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

Ref<SVGSVGElement | HTMLCanvasElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

Simulation
Layout
Style
Customization
Grid & Axes
Interactivity
Motion