Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        series: [{
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],           
            /*zoneAxis:'y',
            zones: [
            {
                value: -5,
                color: '#ddd'
            },
                {
                value: 0,
                color: '#eee'
            },
            {
                value: 10,
                color: '#7cb5ec'
            }, 
            {
                value: 20,
                color: '#000'
            }],*/
//if you uncomment the below code you will see that zones will be created according to the x-axis            
          zoneAxis:'x',
            zones: [
            {
                value: 3,
                color: '#ddd'
            },
            {
                value: 7,
                color: '#7cb5ec'
            }, 
            {
                value: 11,
                color: '#000'
            }]
        }]
    });
});