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.

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.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

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

Define chart's colors.

CssMixBlendModeoptionaldefault:'normal'
multiply

Define CSS mix-blend-mode for nodes.

supportsvgcanvas
Customization
(string | Component)[]optionaldefault:['grid', 'axes', 'nodes', 'markers', 'mesh', 'legends', 'annotations']

Defines the order of layers.

FunctionComponent<ScatterPlotNodeProps<RawDatum>>optional

Override default node rendering for SVG implementation.

supportsvgcanvas
(ctx: CanvasRenderingContext2D, props: ScatterPlotLayerProps<RawDatum>) => voidoptional

Override default node rendering for 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: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.

Annotations
object[]optional

Extra annotations.

object[]optional

Extra markers.

supportsvgcanvas
Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

supportsvgcanvas
string | objectoptionaldefault:'default'
default

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

supportsvgcanvas