Chapter 2: Axis Title Alignment
Y-axis title horizontal aligned at the top
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="border: 2px solid #a1a1a1; width:350; height: 150; border-radius: 3px; margin: 5px 60px 5px 5px; " id='container'></div>
</body>
JavaScript
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
plotBorderWidth: 1,
plotBorderColor: '#3F4044',
borderColor: '#a1a1a1',
borderWidth: 2,
borderRadius: 3
},
title: {
text: 'Web browsers statistics',
},
subtitle: {
text: 'From 2008 to present',
verticalAlign: 'top',
y: 60
},
xAxis: {
categories: [ 'Jan 2008', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2009', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2010', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2011', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan 2012', 'Feb', 'Mar'
],
tickInterval: 3
},
yAxis: {
title: {
text: 'Percentage %',
rotation: 0,
x: 0,
y: -15,
margin: -70,
align: 'high'
},
min: 0
},
plotOptions: {
series: {
lineWidth: 2
}
},
series: [{
name: 'Internet Explorer',
data: [54.7, 54.7, 53.9, 54.8, 54.4, 54.2, 52.4, 51.0, 49.0, 47.4, 47.0, 46,
44.8, 43.6, 43.3, 42.1, 41.0, 40.7, 39.4, 39.3, 39.6, 37.5, 37.7, 37.2,
36.2, 35.3, 34.9, 33.4, 32.2, 31.0, 30.4, 30.7, 31.1, 29.7, 28.6, 27.5,
...