ScatterPlot

@nivo/scatterplot

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.

roll the dice
Actions Logs
Start interacting with the chart to log actions
Base
Object[]required

Chart data.

objectoptional

X scale configuration.

string | Functionoptional
open editor

Optional formatter for x values.

objectoptional

Y scale configuration.

string | Functionoptional
open editor

Optional formatter for y values.

string | (datum) => stringoptionaldefault:'(d) => `${d.serieId}.${d.index}`'

ID accessor for the node.

number | object | Functionoptionaldefault:9
px

How to compute node size, static or dynamic.

numberrequired

Chart width for non-responsive component.

numberrequired

Chart height for non-responsive component.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

Style
Customization
Grid & Axes
Interactivity
Legends
Annotations
Motion