Highcharts Demo
author(s): Torstein Hønsi
by mlmason
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'From Syria'
},
subtitle: {
text: 'No. of Refugees Resettled in Michigan Since 2002<br> Source: The Refugee Processing Center'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:,.0f}</b> <br/>'
},
series: [{
name: 'Years',
colorByPoint: true,
data: [{
name: '2002-2006',
y: 2,
drilldown: '2002-2006'
}, {
name: '2007-2011',
y: 15,
drilldown: '2007-2011'
}, {
name: '2012-2016',
y: 1949,
drilldown: '2012-2016'
},]
}],
drilldown: {
series: [{
name: '2002-2006',
id: '2002-2006',
data: [
[
'2002',
2
],
[
'2003',
0
],
[
'2004',
0
],
[
'2005',
0
],
...