(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/countries/us/custom/us-small.topo.json'
).then(response => response.json());
const data = [];
Highcharts.data({
table: document.getElementById('data'),
startColumn: 1,
firstRowAsNames: false,
complete: function (options) {
options.series[0].data.forEach(function (p) {
data.push({
ucName: p[0],
value: p[1]
});
});
}
});
topology.objects.default.geometries.forEach(function (g) {
if (g.properties && g.properties.name) {
g.properties.ucName = g.properties.name.toUpperCase();
}
});
Highcharts.mapChart('container', {
title: {
text: 'US unemployment rate in Dec. 2017',
align: 'left'
},
subtitle: {
text: 'Small US map with data labels',
align: 'left'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
xAxis: {
labels: {
enabled: false
}
},
colorAxis: {
labels: {
format: '{value}%'
}
},
series: [{
mapData: topology,
data,
joinBy: 'ucName',
name: 'Unemployment rate per 2017',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
formatter: function () {
return this.point.properties['hc-a2'];
},
style: {
fontSize: '10px'
}
},
tooltip: {
valueSuffix: '%'
}
}, {
type: 'mapline',
data: Highcharts.geojson(topology, 'mapline'),
color: 'silver',
accessibility: {
enabled: false
}
}]
});
})();