Jugal | Plot Bands | Highchart & Highstock

http://stackoverflow.com/questions/19186249/chart-background-highlight-in-highchart Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
<div id="container"></div>

CSS

#container {
    min-width:500px;
}

JavaScript

var chartingOptions = {
    xAxis: {
        plotBands: [{ // mark the weekend
            color: '#FCFFC5',
            from: Date.UTC(2010, 0, 2),
            to: Date.UTC(2010, 0, 4)
        }],
        tickInterval: 24 * 3600 * 1000, // one day
        type: 'datetime'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);