JavaScript
Highcharts.chart('container', {
colors: ['#D2D200', '#666', '#FF9900', '#00559B', '#FF6400', '#006400',
'rgba(124, 181, 236, 0.4)', 'rgba(226, 12, 25, 1)'],
chart: {
type: 'column'
},
title: {
text: 'Total milk prediction next 12 months'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{
min: 0,
title: {
text: 'Kg milk per day expected'
},
},
{ // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Expected Margin',
},
labels: {
format: '€ {value}',
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'bottom',
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
shared: true,
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.2
},
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
}
}
},
series: [{
type: 'areaspline',
name: 'Kg milk per day',
color: '#ff0000',
data: [6135, 5900, 6415, 6641, 6412, 6745, 6974, 7145, 6745, 6347, 6745, 6475],
tooltip: {
valueSuffix: ' kg'
},
} , {
type: 'spline',
color: '#006400',
yAxis: 1,
data: [5.04, 5.0, 5.1, 5.2, 5.2, 5.3, 5.2, 5.4, 5.4, 5.2, 5.3, 5.2],
name: 'Margin per cow per day',
tooltip: {
valuePrefix: ' €'
}}
]
});