Highcharts Map Demo color
HP 2020 Map
by Rikin Patel
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
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instanciate the map
$('#container').highcharts('Map', {
'series' : [{
'data' : [{
'fips' : 'US99',
'value' : 8.0
}, {
'fips' : 'US01',
'value' : 10.0
}, {
'fips' : 'US02',
'value' : 5.7
}, {
'fips' : 'US04',
'value' : 6.9
}, {
'fips' : 'US05',
'value' : 8.7
}, {
'fips' : 'US06',
'value' : 6.7
}, {
'fips' : 'US08',
'value' : 8.8
}, {
'fips' : 'US09',
'value' : 7.9
}, {
'fips' : 'US10',
'value' : 8.3
}, {
'fips' : 'US11',
'value' : 9.6
}, {
'fips' : 'US12',
'value' : 8.6
}, {
'fips' : 'US13',
'value' : 9.3
}, {
'fips' : 'US15',
'value' : 8.1
}, {
'fips' : 'US16',
'value' : 6.4
}, {
'fips' : 'US17',
'value' : 8.1
}, {
'fips' : 'US18',
'value' : 7.9
}, {
'fips' : 'US19',
'value' : 6.7
}, {
'fips' : 'US20',
'value' : 7.1
}, {
'fips' : 'US21',
'value' : 8.7
}, {
'fips' : 'US22',
'value' : 10.8
}, {
'fips' : 'US23',
'value' : 6.6
}, {
'fips' : 'US24',
'value' : 8.8
}, {
'fips' : 'US25',
'value' : 7.6
}, {
'fips' : 'US26',
'value' : 8.4
}, {
'fips' : 'US27',
'value' : 6.6
}, {
'fips' : 'US28',
'value' : 11.6
}, {
'fips' : 'US29',
'value' : 7.7
}, {
'fips' : 'US30',
'value' : 7.4
}, {
'fips' : 'US31',
'value' : 6.7
},...