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.

MUI X Missing license key

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

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.

MUI X Missing license key

API

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