Highcharts Demo

author(s): Torstein Hønsi

by Umair Rafiq

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>


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

JavaScript

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/us-population-density.json', function (data) {

    // Make it joinable
    data.forEach(function (p) {
        p.hasc = 'US.' + p.code.toUpperCase();
    });

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

        title: {
            text: 'Data label format to show value'
        },

        legend: {
            title: {
                text: 'US population density per km²'
            }
        },

        mapNavigation: {
            enabled: true
        },

        colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },

        series: [{
            data: data,
            
            mapData: Highcharts.maps['countries/us/us-all'],
            joinBy: 'hasc',
            dataLabels: {
                enabled: true,
                format: '{point.value:.1f}'
            },
            name: 'Population density',
            tooltip: {
                pointFormat: '{point.code}: {point.value}/km²'
            }
        }]
    });
});