ScatterPlot

@nivo/scatterplotsvgisomorphic

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

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.

Alternatively, you can set useMesh to true to have finer interactions.

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.
objectoptional
Y scale configuration.
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
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines color range.
Customization
optionaldefault:['grid', 'axes', 'points', 'markers', 'mesh', 'legends']
Defines the order of layers.
supportsvgcanvas
Symbols
numberoptionaldefault:6
px
Symbol size.
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
booleanoptionaldefault:true
   Enable/disable y grid.
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).
Functionoptional
Custom tooltip component
supportsvgcanvas
booleanoptional
   Showcase custom tooltip.
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.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvas
numberoptionaldefault:90
Motion stiffness.
supportsvgcanvas
numberoptionaldefault:15
Motion damping.
supportsvgcanvas