grouped columns with percentages for bar chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

grouped columns with percentages for bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Columns</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   www .  j a  v a 2 s . c o  m
var data = [{
    name: 'A',
    data: [72, 50, 52]
}, {
    name: 'B',
    data: [23, 41, 12]
}, {
    name: 'C',
    data: [18, 9, 11]
}, {
    name: 'D',
    data: [89, 46, 54]
}];
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Group 1', 'Group 2', 'Group 3']
    },
    yAxis: {
        title: {
            text: null
        }
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true
            }
        },
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;
                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal += parseInt(mychart.series[i].yData[0]);
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }
    },
    title: {
        text: 'Example'
    },
    series: data
});
    });

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

Related Tutorials