Charts - Scatter

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

Basics

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

<ScatterChart
  width={600}
  height={300}
  series={[
    {
      label: 'Series A',
      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    },
    {
      label: 'Series B',
      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
    },
  ]}
/>

<ScatterChart
  width={600}
  height={300}
  series={[
    {
      label: 'Series A',
      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    },
    {
      label: 'Series B',
      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
    },
  ]}
/>

Press Enter to start editing

Interaction

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

disableVoronoiundefined radius

To use this feature with composition, add the ChartsVoronoiHandler.

<ChartsVoronoiHandler voronoiMaxRadius={50} />

Charts - Scatter

Basics

Interaction

Styling

CSS 🚧

Shape 🚧

Size 🚧