🚀 MUI X v6 is out! Discover what's new and get started now!

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

Charts - Scatter

Basics

Styling

CSS 🚧

Shape 🚧

Size 🚧