(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/custom/world.topo.json'
).then(response => response.json());
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-population.json', function (data) {
Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
map: topology
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
accessibility: {
description: 'We see how China and India by far are the countries with the largest population.'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
mapView: {
fitToGeometry: {
type: 'MultiPoint',
coordinates: [
[-164, 54],
[-35, 84],
[179, -38],
[-68, -55]
]
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['iso-a3', 'code3'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
}
}]
});
});
})();