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

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>
  );
}

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

Multiple scatter series

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

Triangle

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 />} />

Variable point sizes with ZAxis

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>

ZAxis controls the size of scatter points. The range prop defines the minimum and maximum sizes.

With reference lines

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

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

Set line={true} to connect the scatter points with lines.

Custom active shape

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

Scatter with labels

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

Domain and range customization

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