Highcharts Demo

author(s): Torstein Hønsi

by jeffgw

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/europe.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-all-territories.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: 'countries/us/us-all',
        borderWidth: 1
    },

    title: {
        text: 'Nordic countries'
    },

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

    legend: {
        enabled: false
    },

    series: [{
        name: 'Country',
        data: [
            ['us-ca', 1]
        ],
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            formatter: function () {
                if (this.point.value) {
                    return this.point.name;
                }
            }
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}'
        }
    }]
});