Life expectancy by country (2021)
HTML
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<!--<script src="https://cdn.jsdelivr.net/gh/highcharts/highcharts-dist@nightly/highmaps.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highcharts/highcharts-dist@nightly/modules/exporting.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highcharts/highcharts-dist@nightly/modules/data.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highcharts/highcharts-dist@nightly/modules/accessibility.js"></script>-->
<div id="scrollable"><div id="container"></div></div>
<pre id="csv">
Country Name;Country Code;2021
Aruba;ABW;74.626
Africa Eastern and Southern;AFE;62.4545896453863
Afghanistan;AFG;61.982
Africa Western and Central;AFW;56.9886567820139
Angola;AGO;61.643
Albania;ALB;76.463
Andorra;AND;
Arab World;ARB;70.814483021063
United Arab Emirates;ARE;78.71
Argentina;ARG;75.39
Armenia;ARM;72.043
American Samoa;ASM;
Antigua and Barbuda;ATG;78.497
Australia;AUS;83.3
Austria;AUT;81.2390243902439
Azerbaijan;AZE;69.366
Burundi;BDI;61.663
Belgium;BEL;81.890243902439
Benin;BEN;59.821
Burkina Faso;BFA;59.27
Bangladesh;BGD;72.381
Bulgaria;BGR;71.5146341463415
Bahrain;BHR;78.76
Bahamas, The;BHS;71.598
Bosnia and Herzegovina;BIH;75.3
Belarus;BLR;72.3706829268293
Belize;BLZ;70.47
Bermuda;BMU;79.28
Bolivia;BOL;63.63
Brazil;BRA;72.75
Barbados;BRB;77.571
Brunei Darussalam;BRN;74.642
Bhutan;BTN;71.815
Botswana;BWA;61.141
Central African Republic;CAF;53.895
Canada;CAN;82.5966097560976
Central Europe and the Baltics;CEB;74.9320769722919
Switzerland;CHE;83.8512195121951
Channel Islands;CHI;81.232
Chile;CHL;78.944
China;CHN;78.211
Cote d'Ivoire;CIV;58.598
Cameroon;CMR;60.333
Congo, Dem. Rep.;COD;59.193
Congo,...
CSS
body {
background: var(--highcharts-background-color);
color: var(--highcharts-neutral-color-100);
}
#scrollable {
display: flex;
height: 2000px;
align-items: center;
justify-content: center;
}
#container {
height: 500px;
min-width: 800px;
max-width: 800px;
}
#csv {
display: none;
}
JavaScript
(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/custom/world.topo.json'
).then(response => response.json());
const dataTable = new Highcharts.Data({
csv: document.getElementById('csv').innerText
}).getDataTable();
Highcharts.mapChart('container', {
chart: {
map: topology
},
dataTable,
title: {
text: 'Life expectancy by country (2021)',
align: 'left'
},
credits: {
href: 'https://data.worldbank.org',
mapText: ' Data source: The World Bank'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 60
},
tooltip: {
valueDecimals: 1,
valueSuffix: ' years'
},
series: [{
name: 'Life expectancy',
// Point properties (countryCode, name and value) are mapped to
// columns in the data table
dataMapping: {
countryCode: 'Country Code',
name: 'Country Name',
value: '2021'
},
// The `iso-a3` property in the map topology is used to join with
// the `countryCode` of the point properties
joinBy: ['iso-a3', 'countryCode'],
dataLabels: {
enabled: true,
format: '{point.value:.0f}',
filter: {
operator: '>',
property: 'labelrank',
value: 250
},
style: {
fontWeight: 'normal'
}
}
}]
});
})();