Highcharts - Compare two months (DOW histogram)
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: 'Monthly Compare'
},
xAxis: [{
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
dateTimeLabelFormats: {
day: '%e of %b (%w)'
},
title: {
text: 'Feb/Mar 2016',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Sales',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 100,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [ {
name: 'Feb Sales',
type: 'column',
color: "#E0FFE0",
data: [10, 10, 11, 12, 9, 24, 25],
dashStyle: 'shortdot',
tooltip: {
valuePrefix: '£'
}
},{
name: 'March Sales',
type: 'column',
color: "#80FF80",
data: [11, 10, 13, 14,10, 26, 25.5],
tooltip: {
valuePrefix: '£'
}
}]
});
});