Highcharts Demo
author(s): Torstein Hønsi
by mamezito
HTML
<script src="https://code.highcharts.com/highcharts.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
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Month view',
colorByPoint: true,
data: [{
name: 'January',
y: 8,
drilldown: 'january'
}, {
name: 'Feburary',
y: 9,
drilldown: 'february'
}, {
name: 'March',
y: 7,
drilldown: 'march'
}, {
name: 'April',
y: 6,
drilldown: 'april'
}, {
name: 'May',
y: 5,
drilldown: 'may'
}, {
name: 'June',
y: 5,
drilldown: 'june'
}, {
name: 'July',
y: 3,
drilldown: 'july'
}, {
name: 'August',
y: 5,
drilldown: 'August'
}, {
name: 'August',
y: 5,
drilldown: 'August'
}, {
name: 'August',
y: 5,
drilldown: 'August'
}, {
name: 'September',
y: 2,
drilldown: 'september'
}, {
name: 'October',
y: 4,
drilldown: 'october'
}]
}],
drilldown: {
series: [{
id: 'january',
data: [
['1', 4],
['2', 2],
['3', 1],
['4', 2],
['5', 1],
['6', 4],
['7', 2],
['8', 1],
['9', 2],
['10', 1],
['11', 4],
['12', 2],
['13',...