Docs › Chart types

Scatter and bubble

The relation between two values, with a third as the bubble size.

type: 'scatter' takes [x, y] pairs or { x, y, r } points; numeric x makes a numeric axis. With r it becomes a bubble chart (the largest r gets about 48px across; areas follow the values).

Live example

Code for this example

createChart('#chart', {
  type: 'scatter',
  title: 'Ad spend and sales',
  xAxis: { title: 'Ad spend ($)' },
  yAxis: { title: 'Sales ($)' },
  numberFormat: 'comma',
  data: {
    series: [
      { name: 'Search ads', data: [{ x: 1200, y: 9800, r: 14 }, { x: 1800, y: 13200, r: 22 }, { x: 2600, y: 16100, r: 30 }, { x: 3400, y: 17900, r: 26 }] },
      { name: 'Social ads', data: [{ x: 900, y: 5200, r: 10 }, { x: 1500, y: 7600, r: 16 }, { x: 2300, y: 10100, r: 18 }, { x: 3100, y: 11500, r: 20 }] },
    ],
  },
});

Up to three series stay easy to tell apart by color; split the chart beyond that.
Marker shape: pointShape, 'circle' | 'square' | 'diamond'.
Dates on x make a time axis.