> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Scatter chart

> Examples and usage of ScatterChart component

The `ScatterChart` component displays data points on a two-dimensional plot. It's ideal for showing relationships between two variables or identifying patterns and outliers.

## Basic scatter chart

```jsx theme={null}
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { x: 100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 170, y: 300, z: 400 },
  { x: 140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
  { x: 110, y: 280, z: 200 },
];

function Example() {
  return (
    <ScatterChart width={600} height={300}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="x" type="number" name="X Value" />
      <YAxis dataKey="y" type="number" name="Y Value" />
      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
      <Legend />
      <Scatter name="Dataset" data={data} fill="#8884d8" />
    </ScatterChart>
  );
}
```

<Note>
  Unlike other charts, `ScatterChart` requires numeric `type="number"` on both axes and uses `dataKey` on the axes to specify which fields to plot.
</Note>

## Multiple scatter series

```jsx theme={null}
const data01 = [
  { x: 100, y: 200 },
  { x: 120, y: 100 },
  { x: 170, y: 300 },
  { x: 140, y: 250 },
  { x: 150, y: 400 },
];

const data02 = [
  { x: 200, y: 260 },
  { x: 240, y: 290 },
  { x: 190, y: 290 },
  { x: 198, y: 250 },
  { x: 180, y: 280 },
];

<ScatterChart width={600} height={300}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="x" type="number" />
  <YAxis dataKey="y" type="number" />
  <Tooltip cursor={{ strokeDasharray: '3 3' }} />
  <Legend />
  <Scatter name="Series A" data={data01} fill="#8884d8" />
  <Scatter name="Series B" data={data02} fill="#82ca9d" />
</ScatterChart>
```

## Custom shape

<CodeGroup>
  ```jsx Triangle theme={null}
  const Triangle = (props) => {
    const { cx, cy, fill } = props;
    return (
      <path
        d={`M ${cx},${cy - 10} L ${cx + 10},${cy + 10} L ${cx - 10},${cy + 10} Z`}
        fill={fill}
      />
    );
  };

  <Scatter name="Dataset" data={data} fill="#8884d8" shape={<Triangle />} />
  ```

  ```jsx Cross theme={null}
  const Cross = (props) => {
    const { cx, cy, fill } = props;
    return (
      <g>
        <line x1={cx - 5} y1={cy} x2={cx + 5} y2={cy} stroke={fill} strokeWidth={2} />
        <line x1={cx} y1={cy - 5} x2={cx} y2={cy + 5} stroke={fill} strokeWidth={2} />
      </g>
    );
  };

  <Scatter name="Dataset" data={data} fill="#8884d8" shape={<Cross />} />
  ```

  ```jsx Custom function theme={null}
  <Scatter 
    name="Dataset" 
    data={data} 
    fill="#8884d8"
    shape={(props) => {
      const { cx, cy, fill } = props;
      return <circle cx={cx} cy={cy} r={5} fill={fill} />;
    }}
  />
  ```
</CodeGroup>

## Variable point sizes with ZAxis

```jsx theme={null}
import { ZAxis } from 'recharts';

const data = [
  { x: 100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 170, y: 300, z: 400 },
  { x: 140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
];

<ScatterChart width={600} height={300}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="x" type="number" name="X Value" />
  <YAxis dataKey="y" type="number" name="Y Value" />
  <ZAxis dataKey="z" type="number" range={[50, 500]} name="Size" />
  <Tooltip cursor={{ strokeDasharray: '3 3' }} />
  <Legend />
  <Scatter name="Dataset" data={data} fill="#8884d8" />
</ScatterChart>
```

<Note>
  `ZAxis` controls the size of scatter points. The `range` prop defines the minimum and maximum sizes.
</Note>

## With reference lines

```jsx theme={null}
import { ReferenceLine, ReferenceDot } from 'recharts';

<ScatterChart width={600} height={300}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="x" type="number" />
  <YAxis dataKey="y" type="number" />
  <Tooltip />
  <Legend />
  <Scatter name="Dataset" data={data} fill="#8884d8" />
  <ReferenceLine x={150} stroke="red" label="X=150" />
  <ReferenceLine y={250} stroke="green" label="Y=250" />
  <ReferenceDot x={150} y={250} r={10} fill="red" stroke="none" />
</ScatterChart>
```

## Joint line scatter

```jsx theme={null}
<Scatter name="Dataset" data={data} fill="#8884d8" line />
```

<Note>
  Set `line={true}` to connect the scatter points with lines.
</Note>

## Custom active shape

```jsx theme={null}
<Scatter 
  name="Dataset" 
  data={data} 
  fill="#8884d8"
  activeShape={{ fill: 'red', r: 8 }}
/>
```

## Scatter with labels

```jsx theme={null}
<Scatter 
  name="Dataset" 
  data={data} 
  fill="#8884d8"
  label={{ fill: 'black', fontSize: 10 }}
/>
```

## Domain and range customization

```jsx theme={null}
<ScatterChart width={600} height={300}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis 
    dataKey="x" 
    type="number" 
    domain={[0, 300]} 
    name="X Value"
  />
  <YAxis 
    dataKey="y" 
    type="number" 
    domain={[0, 500]}
    name="Y Value"
  />
  <Tooltip />
  <Scatter name="Dataset" data={data} fill="#8884d8" />
</ScatterChart>
```

## Common pitfalls

* **Axis type**: Both X and Y axes must use `type="number"` for scatter charts.
* **Data structure**: Each data point should have properties matching the `dataKey` specified on both axes.
* **Missing data**: Unlike line charts, scatter plots don't interpolate missing values. Each point must have both x and y values.
* **Tooltip event type**: ScatterChart only supports `'item'` tooltip event type.
* **ZAxis range**: When using ZAxis for point sizing, ensure the `range` values are appropriate for your design.