Charts - Bubble

A bubble chart extends scatter by mapping data values to point sizes and colors, revealing a third or fourth dimension in two-dimensional space.

Overview

A bubble chart is a scatter chart where each point can have a variable size and color determined by data values. The x and y positions encode two variables, while the bubble size and color encode additional ones.

Africa

Asia

Europe

North America

Oceania

South America

Bubble size is proportional to the population · Data for 2023, Our World in Data

Mapping data to color

As with other charts, you can modify the series colors either directly, or with the color palette.

You can also modify the color by using the axes' colorMap, which maps values to colors. Scatter charts use the following, in order of priority:

The z-axis color
The y-axis color
The x-axis color
The series color

The z-axis is a third axis that lets you style scatter points by a value other than position. Pass it with the zAxis prop.

The mapped value can come from the colorValue property on each series data point, or from the z-axis data. You can set the color value in three ways:

<ScatterChart
  // First option
  series={[{ data: [{ id: 0, x: 1, y: 1, colorValue: 5 }] }]}
  // Second option
  zAxis={[{ data: [5] }]}
  // Third option
  dataset={[{ price: 5 }]}
  zAxis={[{ dataKey: 'price' }]}
/>

See Styling—Value-based colors for the colorMap properties.

x-axis colorMap

y-axis colorMap

z-axis colorMap

<ScatterChart
  /* ... */
  series={[{ data: data.map(point => ({...point, colorValue: point.x + point.y})) }]}
  xAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [-1.5, 0, 1.5],
      colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
    }
  }]}
  yAxis={[{}]}
  zAxis={[{}]}
/>

Mapping data to size

You can also map a value to the size of each scatter point.

Set a sizeMap on a z-axis and point the series to it with the sizeAxisId prop. The mapped value comes from the sizeValue property on each data point, or from the z-axis data.

The sizeMap supports the same continuous, piecewise, and ordinal types as colorMap, but it maps values to a marker radius in pixels. A series can set both colorAxisId and sizeAxisId to style points by two values at once.

Edit code

<ScatterChart
  height={300}
  grid={{ horizontal: true, vertical: true }}
  series={[{ data, sizeAxisId: 'size' }]}
  zAxis={[
    {
      id: 'size',
      sizeMap: { type: 'continuous', min: 0, max: 25, size: [3, 24] },
    },
  ]}
/>

<ScatterChart
  height={300}
  grid={{ horizontal: true, vertical: true }}
  series={[{ data, sizeAxisId: 'size' }]}
  zAxis={[
    {
      id: 'size',
      sizeMap: { type: 'continuous', min: 0, max: 25, size: [3, 24] },
    },
  ]}
/>

Press Enter to start editing

Using zAxis in custom components

The zAxis provides color and size scales that the default scatter plot uses internally.

Custom markers receive color and size values that have already been mapped through these scales, making it easy to derive additional visual properties such as stroke color and stroke width.

For more advanced use cases, custom components can access z-axis scales directly with the useZAxis() hook and series data with the useScatterSeries() hook.

The example below renders the Iris flower dataset with some classification prediction. It uses 4 z-axes to map:

The species to a fill color
The predicted species to a stroke color
The petal length to the size of the mark
The confidence to the stroke width

Fill color represents the actual species, stroke color represents the predicted species, bubble size represents petal length, and stroke width represents prediction confidence.

Different size scales

By default, a sizeMap with type 'continuous' transforms values with a square root scale. That makes the values proportional to the surface of the bubble rather than its radius.

You can change that behavior with sizeMap.interpolator: 'log' | 'linear' | 'sqrt', or by providing a function to sizeMap.size.

When you do, make the choice explicit in the copy so the size encoding is not misleading.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.