Skip to content

Charts - Scatter

Scatter charts express the relation between two variables, using points in a surface.


Scatter chart series should contain a data property containing an array of objects. Those objects require x, y, and id properties.

Press Enter to start editing


Since scatter elements can be small, interactions do not require hovering exactly over an element. When the pointer is in the drawing area, the closest scatter element will be used for interactions (tooltip or highlights). To do so, the chart computes Voronoi cells which map the pointer position to the closest element.

You can define a maximal radius with the voronoiMaxRadius prop. If the distance with the pointer is larger than this radius, no item will be selected. Or set the disableVoronoi prop to true to trigger interactions only when hovering exactly over an element instead of Voronoi cells.

max radius

To use this feature with composition, add the ChartsVoronoiHandler.

<ChartsVoronoiHandler voronoiMaxRadius={50} />

Click event

Scatter Chart provides an onItemClick handler for handling clicks on specific scatter items. It has the following signature.

const onItemClick = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};

Click on the chart

// The data will appear here

If disableVoronoi=true, users need to click precisely on the scatter element, and the mouse event will come from this element.

Otherwise, the click behavior will be the same as defined in the interaction section and the mouse event will come from the svg component.


Color scale

As with other charts, you can modify the series color either directly, or with the color palette.

You can also modify the color by using axes colorMap which maps values to colors. The scatter charts use by priority:

  1. The z-axis color
  2. The y-axis color
  3. The x-axis color
  4. The series color

Learn more about the colorMap properties in the Styling docs.

  /* ... */
  series={[{ data: => ({...point, z: point.x + point.y})) }]}
    colorMap: {
      type: 'piecewise',
      thresholds: [-1.5, 0, 1.5],
      colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],


You can add a grid in the background of the chart with the grid prop.

See Axis—Grid documentation for more information.

Press Enter to start editing


See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.