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(
    'https://code.highcharts.com/mapdata/custom/world.topo.json'
).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.