Highcharts Demo

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

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

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

CSS

.hc-label {
    background-color: red;
    padding: 0px 5px;
    color: yellow;
}

JavaScript

$(function () {
    var categoryLinks = {
        'Foo': 'http://www.google.com/search?q=foo',
            'Bar': 'http://www.google.com/search?q=foo+bar',
            'Foobar': 'http://www.google.com/serach?q=foobar'
    };

    $('#container').highcharts({
        chart: {
            events: {
                load: function () {
                    var chart = this;
                  /* X-Axis - Min: 0 ; Max: 12*/
                    
               var box1_x1 = chart.xAxis[0].toPixels(6),
                box1_x2 = chart.xAxis[0].toPixels(12),
                box1_y1 = chart.yAxis[0].toPixels(50),
                box1_y2 = chart.yAxis[0].toPixels(100);

//Box 1 - x0,
            chart.renderer.rect(box1_x1,box1_y2, box1_x2 - box1_x1, box1_y1 - box1_y2)
                .attr({
                fill: '#f2f2f2'
            }).add();
           
            
                    
                }
            }
        },
 yAxis: {
           min: 0,
                max: 100 ,
                minorTicks:false
        },

        xAxis: {
            tickInterval: 2  
        },
        series: [{
            data: [0,20,25,50,100,35,45,78,43,87,32,54,25]
        }]
    });
});