Population pyramid for different regions in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Population pyramid for different regions in bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ElementStacks</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" src="http://highcharts.com/js/highcharts.src.js"></script> 
      <script type="text/javascript">
    $(function(){//from www.  jav a  2  s . c  o  m
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title: {
        text: 'Stacked bar chart with negative values'
    },
    xAxis: [{
            categories: ['5-8 ans', '9-11 ans', '12-14 ans', '15-17 ans'],
            reversed: false
        }, { // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: ['5-8 ans', '9-11 ans', '12-14 ans', '15-17 ans'],
            linkedTo: 0
        }],
    yAxis: {
        min: -10,
        max: 10,
        plotLines: [{
            width: 2,
            value: 0,
            color: 'red'
        }],
        title: {
            enabled: false
        }
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                this.series.name +': '+ this.y +'';
        }
    },
    plotOptions: {
        bar:{
            groupPadding: 0.2
        },
        series: {
            stacking: null
        }
    },
    series: [{
        name: 'Region 1',
        zIndex: 1000,
        data: [[0, -3 ],[0,3],[1, -5] ,[1,5],[2, -4],[2,4],[3, -3],[3,3]]
    },{
        name: 'Region 2',
        data: [[0, -4] ,[0,4],[1, -2],[1,2],[2, -6],[2,6],[3, -4],[3,4]]
    },{
        name: 'Region 3',
        data:  [[0, -3],[0,3],[1, -5],[1,5],[2, -4],[2,4],[3, -3],[3,3]]
    }]
});
    });

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

Related Tutorials