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.
Chart data.
X scale configuration.
Optional formatter for x values.
Y scale configuration.
Optional formatter for y values.
'(d) => `${d.serieId}.${d.index}`'ID accessor for the node.
9How to compute node size, static or dynamic.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
Define style for common elements such as labels, axes…
Define chart's colors.
'grid', 'axes', 'nodes', 'markers', 'mesh', 'legends', 'annotations']Defines the order of layers.
Override default node rendering for SVG implementation.
Override default node rendering for canvas implementation.
trueEnable/disable x grid.
Specify values to use for vertical grid lines.
trueEnable/disable y grid.
Specify values to use for horizontal grid lines.
Top axis configuration.
Right axis configuration.
Bottom axis configuration.
Left axis configuration.
trueEnable/disable interactivity.
trueUse a mesh to detect mouse interactions.
falseDisplay mesh used to detect mouse interactions (voronoi cells).
Custom tooltip component
onMouseEnter handler, it receives target node data and mouse event.
onMouseMove handler, it receives target node data and mouse event.
onMouseLeave handler, it receives target node data and mouse event.
onClick handler, it receives target node data and mouse event.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.
Extra annotations.
Extra markers.
trueEnable/disable transitions.
'default'Motion config for react-spring, either a preset or a custom configuration.