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/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-all-territories.js"></script>


<div id="container" style="max-width: 1000px"></div>

CSS

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

JavaScript

var data = [1, 3, 5, 2, 4, 1, 3];


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

    title: {
        text: 'Data joined by <em>null</em>'
    },

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

    colorAxis: {},

    series: [{
        data: data,
        mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
        joinBy: null,
        name: 'Random data',
        states: {
            hover: {
                color: '#a4edba'
            }
        }
    }]
});