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.

550 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
numberoptionaldefault:1

Force strength.

numberoptionaldefault:120

Adjust the simulation quality.

Layout
stringoptionaldefault:'vertical'

Chart layout.

numberoptionaldefault:0
px

Gap between each serie.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Paired

Define chart's colors.

Function | stringoptionaldefault:'group'
group

Property or accessor function to be used with colors.

number | Functionoptionaldefault:0
px

Control node border width.

string | object | Functionoptionaldefault:'rgba(0, 0, 0, 0)'
inheritthemecustom
inherited property
color
modifiers
darker

Control node border color.

Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'circles', 'annotations', 'mesh']

Defines the order of layers and add custom layers.

Componentoptional

Override default circle component for the SVG implementation.

supportsvgcanvas
Functionoptional

Override default circle rendering for the canvas implementation.

supportsvgcanvas
Grid & Axes
booleanoptionaldefault:true
   

Enable/disable x grid.

(number | string)[]optional

Specify values to use for vertical grid lines.

booleanoptionaldefault:true
   

Enable/disable y grid.

(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, always true for canvas.

supportsvgcanvas
booleanoptionaldefault:false
   

Display the mesh used to detect mouse interactions (voronoi cells), depends on useMesh.

(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
string | objectoptionaldefault:'gentle'

Motion config for react-spring, either a preset or a custom configuration.

supportsvgcanvas
Recipes
Using annotations