ScatterPlot

@nivo/scatterplotsvgisomorphic
svgcanvas

A scatter plot chart, which can display several data series.

It lets you plot data on 2 dimensions, x & y, and can optionally show a third quantitative dimension if you enable dynamic node size, please have a look at the nodeSize property for further information.

The responsive alternative of this component is ResponsiveScatterPlot, it also offers another implementation, see ScatterPlotCanvas. You can also see more example usages in the storybook.

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

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
required
Chart data.
objectoptional
X scale configuration.
string | Functionoptional
Optional formatter for x values.
objectoptional
Y scale configuration.
string | Functionoptional
Optional formatter for y values.
number | object | Functionoptionaldefault:9
px
How to compute node size, static or dynamic.
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.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines color range.
stringoptionaldefault:'normal'
multiply
Defines CSS mix-blend-mode property.
supportsvgcanvas
Customization
optionaldefault:['grid', 'axes', 'nodes', 'markers', 'mesh', 'legends', 'annotations']
Defines the order of layers.
optional
Override default node rendering.
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
Array<number | string | Date>optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
Array<number | string | Date>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:true
   Use a mesh to detect mouse interactions.
supportsvgcanvas
booleanoptionaldefault:false
   Display mesh used to detect mouse interactions (voronoi cells).
Functionoptional
Custom tooltip component
supportsvgcanvas
(node, event) => voidoptional
onMouseEnter handler, it receives target node data and mouse event.
(node, event) => voidoptional
onMouseMove handler, it receives target node data and mouse event.
(node, event) => voidoptional
onMouseLeave handler, it receives target node data and mouse event.
(node, event) => voidoptional
onClick handler, it receives target node data and mouse event.
Legends
object[]optional
Optional chart's legends.
add legend
legend[0]: bottom-right, columnremove
stringoptional
bottom-right
Defines legend anchor relative to chart's viewport.
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
booleanoptional
   Justify symbol and label.
numberoptional
px
Legend block x translation.
numberoptional
px
Legend block y translation.
numberrequired
px
Legend item width.
numberrequired
px
Legend item height.
numberoptional
px
Spacing between each item.
numberoptional
px
Item symbol size.
stringoptional
left-to-right
Item layout direction.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvas
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvas
numberoptionaldefault:15
Motion damping.
supportsvgcanvas
Recipes
Using custom nodeUsing time scalesUsing logarithmic scalesVarying node sizeCustom tooltipSynchronizing chartsUsing mouse enter/leave