Home›Scatter›Scatter Chart (XY Scatter & Bubble)
POPULARScatter

Scatter Chart (XY Scatter & Bubble)

Multi-cohort scatter plot with quadrant benchmark thresholds, bubble size dimensions, and CAC vs. LTV unit economics correlation.

Loading chart…
#scatter#correlation#data points#xy#bubble#cohort
Customization Guides & Code Snippets

◆Creating Benchmark Quadrants with ReferenceLine

Plot dividing crosshairs across X and Y axes (e.g. x={50} for CAC and y={50} for LTV) using ReferenceLine with dashed strokes and custom quadrant labels.

<ReferenceLine x={50} stroke="#5c6370" strokeDasharray="3 3" strokeWidth={1} label={{ value: 'CAC Threshold ($50k)', fill: 'var(--muted)', fontSize: 10, position: 'top' }} />
<ReferenceLine y={50} stroke="#5c6370" strokeDasharray="3 3" strokeWidth={1} label={{ value: 'LTV Target ($50k)', fill: 'var(--muted)', fontSize: 10, position: 'right' }} />

◆Scaling Bubble Dimensions with ZAxis

Pass a continuous dataKey to ZAxis with range={[100, 500]} to render a 3D bubble scatter chart where dot size represents account ARR or contract volume.

<ZAxis type="number" dataKey="arr" range={[100, 500]} name="ARR" />
When to use a Scatter Chart (XY Scatter & Bubble)

A Scatter Chart (XY Scatter & Bubble) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Finding correlation between two variables (e.g. ad spend vs conversions)
  • ✓Identifying outliers in a dataset
  • ✓Visualizing distribution of data points across two axes
  • ✓A/B test result analysis
  • ✓Bubble charts where a third dimension controls dot size
Tips for Recharts Scatter Chart (XY Scatter & Bubble)
TIP 1Use ZAxis with a range prop to control bubble sizes in bubble charts
TIP 2Add a ReferenceArea to highlight a specific quadrant
TIP 3Use different colors per group to distinguish data clusters
TIP 4Always label your axes clearly — scatter charts can be confusing without context
TIP 5Add a Tooltip with custom content to show all three data dimensions
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a scatter chart and what is it used for?

A scatter chart (or scatter plot) plots data points along two numerical axes (X and Y) to determine whether a statistical correlation exists between two variables. It is widely used in SaaS analytics (e.g. CAC vs LTV ratios), scientific data exploration, and outlier detection.

What is an XY scatter chart?

An XY scatter chart maps pairs of numerical coordinates where the horizontal position reflects the independent X variable and the vertical position reflects the dependent Y variable. Unlike category bar charts, both axes on an XY scatter chart are continuous mathematical scales.

How do you create a scatter chart in React with Recharts (react scatter chart)?

Import ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip, and ResponsiveContainer from 'recharts'. Wrap your data inside <ResponsiveContainer> and configure <Scatter name='Cohort' data={data} fill='#00e5a0' /> with numerical X and Y domains.

How do you make a scatter chart in Excel (scatter chart in excel)?

In Microsoft Excel, select two adjacent numerical columns, click the Insert tab on the top ribbon, locate the Charts group, click the 'Insert Scatter (X, Y) or Bubble Chart' icon, and choose 'Scatter with only Markers'.

Related Charts