Highcharts Map Demo color
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', {
title : {
text : 'US population density (/km²)'
},
'legend' : {
'title' : {
'text' : 'Percent of live births'
},
'layout' : 'vertical'
},
colors : ['#D7EDE5', '#7FFF00', '#37A47E'],
colorAxis : {
dataClassColor : 'category',
dataClasses : [{
to : 57.1,
name: 'under 57.1'
}, {
from : 57.2,
to : 60.4
}, {
from : 60.5,
name: 'over 60.5'
}
]
},
series : [{
states : {
hover : {
color : '#BADA55'
}
},
animation : {
duration : 1000
},
data : [{
'fips' : 'US99',
'value' : 58.0
}, {
'fips' : 'US01',
'value' : 59.8
}, {
'fips' : 'US02',
'value' : 50.0
}, {
'fips' : 'US04',
'value' : 60.5
}, {
'fips' : 'US05',
'value' : 60.9
}, {
'fips' : 'US06',
'value' : 55.0
}, {
'fips' : 'US08',
'value' : 56.9
}, {
'fips' : 'US09',
'value' : 49.1
}, {
'fips' : 'US10',
'value' : 57.0
}, {
'fips' : 'US11',
'value' : 51.8
}, {
'fips' : 'US12',
'value' : 58.6
}, {
'fips' : 'US13',
'value' : 59.0
}, {
'fips' : 'US15',
'value' : 51.3
}, {
'fips' : 'US16',
'value' : 63.2
}, {
'fips' : 'US17',
'value' : 58.8
}, {
'fips' : 'US18',
'value' : 58.9
}, {
'fips' : 'US19',
'value' : 63.3
}, {
'fips' : 'US20',
'value' : 58.5
}, {
'fips' :...