SwarmPlotCanvas

@nivo/swarmplotcanvas
svgcanvas

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.

598 nodes
Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
string[]required
Available groups.
string | Functionoptionaldefault:'group'
Propety used to group nodes, must return a group which is available in the groups property.
string | Functionoptionaldefault:'id'
Property used to retrieve the node's unique identifier.
string | Functionoptionaldefault:'id'
Control node label.
string | Functionoptionaldefault:'value'
Property used to retrieve the node's value.
string | Functionoptional
Optional value formatter.
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
numberoptionaldefault:1
Force strength.
numberoptionaldefault:120
Adjust the simulation quality.
Layout
stringoptionaldefault:'vertical'
Chart layout.
numberoptionaldefault:0
px
Gap between each serie.
Style
optional
Define style for common elements such as labels, axes…
Function | object | stringoptionaldefault:{"scheme":"nivo"}
paired
Defines how to compute node color.
Function | stringoptionaldefault:'group'
group
Property or accessor function to be used with colors.
number | Functionoptionaldefault:0
px
Control node border width.
string | object | Functionoptionaldefault:'none'
inheritthemecustom
inherited property
color
modifiers
darker
Control node border color.
Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'nodes', 'mesh', 'annotations']
Defines the order of layers and add custom layers.
Functionoptional
Override default node rendering.
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
Array<number | string>optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
Array<number | string>optional
Specify values to use for horizontal grid lines.
objectoptional
Top axis configuration.
objectoptional
Right axis configuration.
objectoptional
Bottom axis configuration.
objectoptional
Left axis configuration.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
booleanoptionaldefault:false
   Use a mesh to detect mouse interactions.
booleanoptionaldefault:false
   Display mesh used to detect mouse interactions (voronoi cells).
(node, event) => voidoptional
onMouseEnter handler.
(node, event) => voidoptional
onMouseMove handler.
(node, event) => voidoptional
onMouseLeave handler.
(node, event) => voidoptional
onClick handler.
Functionoptional
Custom tooltip component.
Motion
booleanoptionaldefault:true
Enable/disable transitions.
supportsvgcanvas
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvas
numberoptionaldefault:15
Motion damping.
supportsvgcanvas
Recipes
Using annotations