JavaScript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: 'rgba(35,37,38,0)',
backgroundColor: 'rgba(35,37,38,100)',
borderColor: 'rgba(35,37,38,100)',
lineColor: 'rgba(35,37,38,100)',
plotBorderColor: 'rgba(35,37,38,100)',
plotBorderWidth: null,
plotShadow: false,
zoomType: 'xy'
},
colors: [
'#058DC7',
'#EF561A'
],
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
tickLength: 0,
tickInterval: 2,
labels: {
align: 'center'
},
categories: ['03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012']
},
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#EF561A'
}
},
min: 0,
title: {
text: 'Orders',
style: {
color: '#EF561A'
}
}},
{ // Secondary yAxis
title: {
text: 'Revenue',
style: {
color: '#058DC7'
}
},
min: 0,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#058DC7'
}
},
opposite: true}],
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b>: ' + (this.series.name == 'Revenue' ? '$' : '') + this.y + (this.series.name == 'Revenue' ? '' : ' orders');
}
},
legend: {
borderColor: 'rgba(35,37,38,100)',
itemWidth: 80,
width: 200
},
plotOptions: {
series: {
groupPadding: 0
}
},
series: [{
...