JavaScript
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
margin: [150,150,150, 250]
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true,
offset: 50
},{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
},
{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true,
offset: 50,
opposite: true
}
],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
},
title: {
text: 'Temperature',
},
offset: 150
},{ // Primary yAxis
labels: {
format: '{value}°C',
},
title: {
text: 'Temperature',
},
//offset: 50 //do not set this value
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
},
labels: {
format: '{value} mm',
},
opposite: true,
offset: 10//set this value, it's an opposite axis!
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
...