Highlighted areas

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<input value="focus me">
<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/europe.topo.json'
    ).then(response => response.json());

    // Instantiate the map
    Highcharts.mapChart('container', {
        chart: {
            map: topology
        },
        colorAxis: {
        	dataClasses: [{
            	from: 0,
                to: 2
            }, {
            	from: 2,
                to: 4
            }, {
            	from: 4
            }]
        },
        series: [{
            data: [
                ['is', 1],
                ['no', 2],
                ['se', 3],
                ['dk', 4],
                ['fi', 5]
            ]
        }]
    });

})();