Chapter 2: Using Plot Lines and Plot Bands (3)

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

$(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',
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%I:%M %P', this.value);
                },
                y: 17
            },
            gridLineDashStyle: 'dot',
            gridLineWidth: 1,
            tickInterval: 60 * 60 * 1000,
            lineWidth: 2,
            lineColor: '#92A8CD',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#92A8CD',
            minPadding: 0.02,
            offset: 1
        },
        yAxis: {
            title: {
                text: null
            },
            tickInterval: 10,
            minorTickInterval: 5,
            minorGridLineColor: '#D8D8D8',
            minorGridLineDashStyle: 'dashdot',
            gridLineColor: '#8AB8E6',
            alternateGridColor: {
                linearGradient: [0, 250, 500, 250],
                stops: [[0, '#FAFCFF'],
                                                [0.2, 'F7FBFF'],
                                                [0.5, '#F5FAFF'],
                                                [0.8, '#E0F0FF'],
                                                [1, '#D6EBFF']]
            },
            lineWidth: 2,
            lineColor: '#92A8CD',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#92A8CD',
            minorTickLength: 3,
            minorTickWidth: 1,
            minorTickColor: '#D8D8D8',

            plotBands: [{
                from: 2606.01,
                to: 2615.98,
                label: {
                    text: 'â–˛ 9.97 (0.38%)',
                    align:...