Overlay study 2
by kzoon
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
// First, let's make the colors transparent
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' mm'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: [{
name: 'target',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 94.4],
pointPadding: 0
}, {
name: 'product B', stacking: 'normal',
data: [20, 30.8, 65, 50.4, 60.0, 35, 34.0, 55.3, 44.2, 66, 56, 77],
pointPadding: 0.2
}, {
name: 'product A', stacking: 'normal',
data: [20, 30.8, 65, 50.4, 60.0, 35, 34.0, 55.3, 44.2, 66, 56, 77],
pointPadding: 0.2
}]
});
});