Add plotband to column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Add plotband to column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {// w  w  w . jav  a 2s. co  m
    $('#container').highcharts({
        chart: {
            type: 'column',
            alignTicks: false,
        },
        plotOptions: {
            column: {
                pointPlacement: 'between',
                grouping: false
            }
        },
        xAxis :{
            tickInterval: 1
        },
        yAxis: [ {
            max: 100,
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        }, {
            //default
        }],
        tooltip: {
            formatter: function(){
                var p = this,
                    s = p.point.series,
                    t = s.chart.tooltip;
                if(s.index == 0) {
                    return false;
                } else {
                    return '<span style="font-size: 10px">' + p.key + '</span><br/><span style="color:' + s.color + '">' + s.name + '</span>: <b>' + p.y + '</b><br/>';
                }
            }
        },
        series: [{
            data: [[9, 1]],
            stack: 1,
            pointPadding: -0.5,
            linkedTo: '1',
            color: 'rgba(255,255,100, 0.5)',
            yAxis: 0,
            states: {
                hover: {
                    enabled: false
                }
            },
            stacking: 'percent'
        }, {
            id: '1',
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5],
            yAxis: 1
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials