Answer to Stack Overflow question https://stackoverflow.com/questions/51202825/how-to-make-split-grouped-column-bar-chart-in-highcharts-with-percentage

Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<form id="ToggleForm">
  <input type="radio" name="ToggleFormRadio" class="ToggleFormRadio" id="ToggleFormRadio1" value="percentage" checked="checked"><label for="ToggleFormRadio1" >Percentage</label>
  <input type="radio" name="ToggleFormRadio" class="ToggleFormRadio" id="ToggleFormRadio2" value="count"><label for="ToggleFormRadio2">Count</label>
</form>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

// set the chart options to a variable so we can change them later
var chartOptions = {
    chart: {
        type: 'column', renderTo: 'container'
    },
    title: {
        text: 'Use of our apps'
    },
    xAxis: {
        categories: ['App 1', 'App 2', 'App 3']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of users'
        }
    },
    tooltip: {
    	// for this formatter function, we want to change what
      // shows up in the box based on whether we're showing 
      // a count or a percentage of the values
      formatter: function () {
        var total = 0; // the total of the values we're showing
        var s = '<b>' + this.x + '</b><br/>'; // tooltip header
        // go through each item in the column
        $.each(this.points, function (i, point) {
          switch(this.series.options.stacking) {
            case 'percent':
              s += this.series.name + ': ' + Highcharts.numberFormat(this.percentage,0) + '<br/>';
              total += this.percentage;
              break;
            case 'normal':
              s += this.series.name + ': ' + this.y + '<br/>';
              total += this.y;
              break;
          } 
        });
        return s + 'Total: ' + total;
      }, shared: true
    },
    plotOptions: {
        column: {
            stacking: 'normal' // this will be our default
        }
    },
    series: [{
        name: 'IN',
        data: [5, 3, 4]
    }, {
        name: 'US',
        data: [2, 5, 6]
    }, {
        name: 'UK',
        data: [3, 0, 4]
    }]
};

// whenever someone clicks on a radio button, draw the chart
$('.ToggleFormRadio').click(function() {
  switch($(this)[0].value) {
  	case 'percentage':
    	chartOptions.plotOptions.column.stacking = 'percent';
      chartOptions.yAxis.title.text = 'Number of users (%)';
      var chart = Highcharts.chart(chartOptions);
      break;
  	case 'count':
   ...