Axis-Marginnotadded
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: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7],
tooltip: {
valueSuffix: '°C'
}
}]
});
});