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:

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
chart: {
map: 'custom/world'
}

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.