Scatter and Bubble Charts

Visualize correlations and multi-dimensional data with scatter plots and bubble charts

Scatter and bubble charts use cartesian coordinates to display values for two or more variables, making them ideal for showing relationships and correlations.

Scatter Charts

Scatter plots display values for two variables as points on a cartesian coordinate system.

Basic Scatter Chart

Simple Scatter

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Height vs Weight'
  },
  xAxis: {
    title: {
      text: 'Height (cm)'
    }
  },
  yAxis: {
    title: {
      text: 'Weight (kg)'
    }
  },
  series: [{
    name: 'Observations',
    data: [
      [161.2, 51.6],
      [167.5, 59.0],
      [159.5, 49.2],
      [157.0, 63.0],
      [155.8, 53.6]
    ]
  }]
});

Scatter Chart Configuration

Key configuration options from ~/workspace/source/ts/Series/Scatter/ScatterSeriesDefaults.ts:42-137:

lineWidth · number · default: "0"

The width of the line connecting data points. Default is 0 (no line).

plotOptions: {
  scatter: {
    lineWidth: 1 // Show connecting lines
  }
}

marker · object

Marker options. Markers are always enabled for scatter charts.

plotOptions: {
  scatter: {
    marker: {
      radius: 5,
      symbol: 'circle',
      states: {
        hover: {
          enabled: true,
          lineColor: 'rgb(100,100,100)'
        }
      }
    }
  }
}

jitter · object

Apply random displacement to help distinguish overlapping points.

plotOptions: {
  scatter: {
    jitter: {
      x: 0.24,
      y: 0.24
    }
  }
}

findNearestPointBy · string · default: "'xy'"

How to find the nearest point for tooltips. Can be ‘x’, ‘y’, or ‘xy’.

Jitter for Overlapping Points

When plotting discrete values, jitter helps distinguish overlapping points:

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Scatter Plot with Jitter'
  },
  plotOptions: {
    scatter: {
      jitter: {
        x: 0.24,
        y: 0
      },
      marker: {
        radius: 2,
        symbol: 'circle'
      }
    }
  },
  series: [{
    data: [
      [1, 2], [1, 2], [1, 2], [1, 3], [1, 3],
      [2, 1], [2, 2], [2, 2], [2, 3]
    ]
  }]
});

Bubble Charts

Bubble charts display three dimensions of data where the third dimension is represented by bubble size.

Basic Bubble Chart

Simple Bubble

Highcharts.chart('container', {
  chart: {
    type: 'bubble'
  },
  title: {
    text: 'Sales Performance'
  },
  xAxis: {
    title: {
      text: 'Sales'
    }
  },
  yAxis: {
    title: {
      text: 'Profit'
    }
  },
  series: [{
    name: 'Products',
    data: [
      [97, 36, 79],
      [94, 74, 60],
      [68, 76, 58],
      [64, 87, 56],
      [68, 27, 73]
    ]
  }]
});

Bubble Chart Configuration

minSize · number | string · default: "8"

Minimum bubble size. Can be a pixel value or percentage of the plot area.

plotOptions: {
  bubble: {
    minSize: '1%',
    maxSize: '15%'
  }
}

maxSize · number | string · default: "'20%'"

Maximum bubble size. Prevents bubbles from becoming too large.

sizeBy · string · default: "'area'"

Whether the bubble size should be relative to area or width.

plotOptions: {
  bubble: {
    sizeBy: 'width' // Size by diameter instead of area
  }
}

zMin · number

The minimum for the Z value range. Defaults to the lowest Z value in the data.

zMax · number

The maximum for the Z value range. Defaults to the highest Z value in the data.

Multiple Bubble Series

Highcharts.chart('container', {
  chart: {
    type: 'bubble',
    plotBorderWidth: 1
  },
  title: {
    text: 'Multi-Series Bubble Chart'
  },
  legend: {
    enabled: true
  },
  xAxis: {
    gridLineWidth: 1,
    title: {
      text: 'Metric X'
    }
  },
  yAxis: {
    title: {
      text: 'Metric Y'
    }
  },
  plotOptions: {
    bubble: {
      minSize: 3,
      maxSize: 50
    }
  },
  series: [{
    name: 'Region A',
    data: [[97, 36, 79], [94, 74, 60], [68, 76, 58]]
  }, {
    name: 'Region B',
    data: [[25, 10, 87], [2, 75, 59], [11, 54, 8]]
  }, {
    name: 'Region C',
    data: [[47, 47, 21], [20, 12, 4], [6, 76, 91]]
  }]
});

Packed Bubble Chart

A special bubble chart type that packs bubbles without axes:

Highcharts.chart('container', {
  chart: {
    type: 'packedbubble'
  },
  title: {
    text: 'Carbon emissions around the world (2014)'
  },
  plotOptions: {
    packedbubble: {
      minSize: '20%',
      maxSize: '100%',
      layoutAlgorithm: {
        gravitationalConstant: 0.05,
        splitSeries: true,
        seriesInteraction: false,
        dragBetweenSeries: true,
        parentNodeLimit: true
      }
    }
  },
  series: [{
    name: 'Europe',
    data: [
      { name: 'Germany', value: 767.1 },
      { name: 'Croatia', value: 20.7 },
      { name: 'Belgium', value: 97.2 }
    ]
  }, {
    name: 'Africa',
    data: [
      { name: 'South Africa', value: 447.6 },
      { name: 'Egypt', value: 225.1 }
    ]
  }]
});

Marker Symbols

Customize marker appearance:

Built-in Symbols

plotOptions: {
  scatter: {
    marker: {
      symbol: 'circle' // circle, square, diamond, triangle, triangle-down
    }
  }
}

Custom Image

plotOptions: {
  scatter: {
    marker: {
      symbol: 'url(https://example.com/icon.png)',
      width: 20,
      height: 20
    }
  }
}

Different per Point

series: [{
  data: [
    { x: 1, y: 2, marker: { symbol: 'square' } },
    { x: 2, y: 3, marker: { symbol: 'diamond' } },
    { x: 3, y: 1, marker: { symbol: 'triangle' } }
  ]
}]

Use Cases

Scatter Charts

• Correlation analysis
• Distribution patterns
• Outlier detection
• Scientific data

Bubble Charts

• Three-dimensional data
• Portfolio analysis
• Market positioning
• Resource allocation

Data Formats

Scatter Chart Data

1. Array of arrays: data: [[1, 2], [2, 3], [3, 1]]
2. Array of objects: data: [{x: 1, y: 2, name: 'Point 1'}]

Bubble Chart Data

Bubble charts require x, y, and z values:

1. Array of arrays: data: [[1, 2, 10], [2, 3, 20]] (x, y, z)
2. Array of objects: data: [{x: 1, y: 2, z: 10, name: 'Bubble 1'}]

The z value in bubble charts represents the size. Larger z values create larger bubbles.

Too many overlapping bubbles can make the chart difficult to read. Consider using jitter or adjusting bubble sizes.