Chapter 3: Extending to Multiple Series Line Charts (3)
Inverted multiple line series chart. Display marker on one of the series
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>
JavaScript
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true,
},
title: {
text: 'Population ages 65 and over (% of total) and Life Expectancy',
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Data from The World Bank'
},
xAxis: {
categories: [ '1980', '1981', '1982', '1983', '1984', '1985',
'1986', '1987', '1988', '1989', '1990', '1991',
'1992', '1993', '1994', '1995', '1996', '1997',
'1998', '1999', '2000', '2001', '2002', '2003',
'2004', '2005', '2006', '2007', '2008', '2009', '2010' ],
labels: {
step: 5
}
},
yAxis: [{
title: {
text: 'Percentage %'
},
lineWidth: 2,
lineColor: '#4572A7'
}, {
title: {
text: 'Age'
},
opposite: true,
lineWidth: 2,
lineColor: '#AA4643'
}],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
marker: {
enabled: true
},
name: 'Japan - 65 and over',
type: 'spline',
data: [ 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 13, 13, 14, 14,
15, 15, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 23 ]
}, {
name: 'Japan - Life Expectancy',
yAxis:...