🚀 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.

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #7922 if you want to see it land faster.

💬 To have a solution that meets your needs, leave a comment on the same issue. If you already have a use case for this component, or if you are facing a pain-point with your current solution.

Basic demo

<ScatterChart
  width={600}
  height={400}
  series={[
    {
      id: 's1',
      markerSize: 5,
      data: data.map(({ x1, y1, id }) => ({ x: x1, y: y1, id })),
    },
    {
      id: 's2',
      data: data.map(({ x1, y2, id }) => ({ x: x1, y: y2, id })),
    },
  ]}
/>

<ScatterChart
  width={600}
  height={400}
  series={[
    {
      id: 's1',
      markerSize: 5,
      data: data.map(({ x1, y1, id }) => ({ x: x1, y: y1, id })),
    },
    {
      id: 's2',
      data: data.map(({ x1, y2, id }) => ({ x: x1, y: y2, id })),
    },
  ]}
/>

Press Enter to start editing

Charts - Scatter

Basic demo

Customizing axis

Composition