Highlighted areas

author(s): Torstein Hønsi

by Geo George

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/asia.js"></script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

// Instantiate the map
Highcharts.mapChart('container', {
    chart: {
        map: 'custom/asia',
        borderWidth: 1
    },

    title: {
        text: 'Nordic countries'
    },

    subtitle: {
        text: 'Demo of drawing all areas in the map, only highlighting partial data'
    },

    legend: {
        enabled: false
    },
 plotOptions: {
            series: {
                events: {
                    click: function (e) {
                        alert(e.point.value);
                    }
                }
            }
        },
    series: [{
        name: 'Country',
        data: [
            ['cn', 1],
            ['in', 7],
            ['kp', 5],
            ['jp', 79],
            ['ge', 12]
        ],
        dataLabels: {
            enabled: true,
            color: '#000000',
            useHTML: true,
            formatter: function () {
                if (this.point.value) {
                    return "<div>"+this.point.name+"</div><div style='width:20px;height:20px;border-radius:50%;background:red;text-align:center;'>"+this.point.value+"</div>";
                }
            }
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}'
        }
    }]
});