MapData and Data
HTML
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
<div id="container" style="max-width: 1000px" ></div>
JavaScript
$(function () {
// Prepare demo data
var data = [{
'hc-key': 'in-as',
'region':'east',
'hc-group':'admin1',
'value': 80
}, {
'hc-key': 'in-pb',
'region':'north',
'hc-group':'admin1',
'value': 70
},{
'hc-key': 'in-mh',
'region':'west',
'hc-group':'admin1',
'value': 50
},{
'hc-key': 'in-tn',
'region':'south',
'hc-group':'admin1',
'value': 90
},{
'hc-key': 'in-mz',
'region':'east',
'hc-group':'admin2',
'value': 40
},{
'hc-key': 'in-2984',
'region':'west',
'hc-group':'admin2',
'value': 25
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Test MapData and Data'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis : {
min : 30,
labels :{
format: '{value}',
rotation: -45
}
},
series: [{
data: data,
mapData: Highcharts.maps['countries/in/in-all'],
joinBy: ['hc-key', 'region'],
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{point.value}</b>'
}
}],
plotOptions:{
series:{
dataLabels:{
enabled: true,
format: '{series.name}'
}
}
}
});
});