Map Bubble#

The MapBubble series is a combination of the standard bubble chart and map, where each bubble point is displayed over a specific map point shape.

Setting the Map Bubble Series#

In the above example, our mapbubble data is based on regions, so we need to load and add a base map first:

const topology = await fetch(
).then(response => response.json());
chart: {
map: topology

Then we can add our mapbubble series config. The series.type has to be set to 'mapbubble' and the data can be mapped to our main map by the series.joinBy property:

series: [{
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['iso-a3', 'code3'],
data: [
{ code3: 'ABW', z: 105, code: 'AW' },
{ code3: 'AFG', z: 34656, code: 'AF' },

All other information about bubble options can be found in the standard bubble chart documentation.

API Reference#

For an overview of the mapbubble series options see the API reference.