Scatter Chart

Used to show the relationship between two sets of data

AI TipWant to skip the docs? Use the MCP Server

Usage

import { Chart, useChart } from "@chakra-ui/charts"
import { Scatter, ScatterChart, XAxis, YAxis } from "recharts"

<Chart.Root>
  <ScatterChart>
    <XAxis />
    <YAxis />
    <Scatter />
  </ScatterChart>
</Chart.Root>

Here's an example of a scatter chart with multiple series.

Render the Chart.Legend component to display a legend for the scatter chart.

Here's an example that shows a trend line on the chart using the least squares regression method.

To show the trend line, we're using the Scatter component from the recharts library.

<Scatter data={trendLine} shape={() => <Fragment />} />

To draw a line between the dots, pass the line prop to the Scatter component.

<Scatter line={{ stroke: "red" }} />