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/mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 480px; margin: 0 auto"></div>

JavaScript

// Instantiate the map
Highcharts.mapChart('container', {
    chart: {
        map: 'countries/us/us-all',
        spacingBottom: 0
    },
		credits:{
    	enabled:false
    },
    title: {
        text: 'DHA Regional View'
    },

    legend: {
        enabled: true
    },

    plotOptions: {
    	series: {
      			cursor:'pointer',
            point: {
                events: {
                    click: function () {
                       alert(this.series.name)
                    }
                }
            }
        },
        map: {
            allAreas: false,
            joinBy: ['postal-code', 'code'],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                style: {
                    fontWeight: 'bold'
                }
                
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '<b>{series.name}</b>'
            }
        }
    },

    series: [{
        name: 'Region 1',
        color:'red',
        data: ['ME','VT','NH','MA','CT','NY','PA','NJ','DE','DC','VA','MD','WV','OH','KY','IL','IN','MI','WI'].map(function (code) {
            return { code: code };
        })
    }, {
        name: 'Region 2',
        data: ['FL','NC','SC','TN','MS','AL','GA'].map(function (code) {
                return { code: code };
            })
    },{
        name: 'Region 3',
        data: ['TX','AR','LA','OK'].map(function (code) {
                return { code: code };
            })
    },{
        name: 'Region 4',
        data: ['MN','IA','MO','ND','SD','MT','WY','CO','NM','UT','KS','NE'].map(function (code) {
                return { code: code };
            })
    },{
        name: 'Region 5',
        data: ['CA','WA','OR','ID','NV','AZ','AK','HI'].map(function (code) {
                return { code: code };
            })
    }]
});