Chapter 2: Adjusting Intervals and Background (3)
draw a line on the y-axis with line width of 2 and add some measurement marks along the interval lines
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',
height: 250,
spacingRight: 30
},
title: {
text: 'Market Data: Nasdaq 100'
},
subtitle: {
text: 'May 11, 2012'
},
xAxis: {
type: 'datetime',
// Format 24 hour time to AM/PM
dateTimeLabelFormats: {
hour: '%I:%M %P'
}
},
yAxis: {
title: {
text: null
},
tickInterval: 10,
minorTickInterval: 5,
minorGridLineColor: '#ADADAD',
minorGridLineDashStyle: ' dashdot',
gridLineColor: '#8AB8E6',
alternateGridColor: {
linearGradient: {
x1: 0, y1: 1,
x2: 1, y2: 1
},
stops: [ [0, '#FAFCFF' ],
[0.5, '#F5FAFF'] ,
[0.8, '#E0F0FF'] ,
[1, '#D6EBFF'] ]
},
lineWidth: 2,
lineColor: '#92A8CD',
tickWidth: 3,
tickLength: 6,
tickColor: '#92A8CD',
minorTickLength: 3,
minorTickWidth: 1,
minorTickColor: '#D8D8D8'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Nasdaq',
data: [ [ Date.UTC(2012, 4, 11, 9, 30), 2606.01 ], [ Date.UTC(2012, 4, 11, 10), 2622.08 ],
[ Date.UTC(2012, 4, 11, 10, 30), 2636.03 ],
[ Date.UTC(2012, 4, 11, 11),...