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/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/north-america-no-central.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>

<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js"></script>

<div id="container"></div>

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

// Prepare demo data
var data = [{
    'hc-key': 'us',
    value: 3
}, {
    'hc-key': 'ca',
    value: 5
}, {
    'hc-key': 'mx',
    value: 20
}];


// Initiate the chart
Highcharts.mapChart('container', {

    title: {
        text: 'Showing only non-null areas'
    },

    subtitle: {
        text: 'The <em>allAreas</em> option is false'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series: [{
    	  //type:'heatmap',
        data: data,
        mapData: Highcharts.maps['custom/north-america-no-central'],
        joinBy: 'hc-key',
        //allAreas: false,
        name: 'Random data',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }/*,{
            type: 'mapbubble',
            dataLabels: {
                enabled: true,
                format: '{point.capital}'
            },
            name: 'Cities',
            data: [{
        "abbrev":"AL",
        "parentState":"Illnois",
        "capital":"Montgomery",
        "lat":41.824968,
        "lon":-87.323450,
        "z":1222000
      }],
            maxSize: '2%',
						color: H.getOptions().colors[0]
        }*/]
});