JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  var corr = 1,
    pre = [];


  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears']
    },
    yAxis: {
      stackLabels: {
        enabled: true,
        y: 20
      },
      max: 115,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'percent',
        dataLabels: {
          enabled: true,
          style: {
            color: 'black'
          },
          formatter: function() {
            var ret = '',
              i = 0,
              j = 0,
              serNo = this.series._i;

            if (serNo == 0) {
              corr = this.total - this.y + 1;
              pre[this.x] = this.y;
            } else if (serNo == 1) {
              corr = this.total - pre[this.x] - this.y + 1;
            } else {
              corr = 1;
            }

            for (i; i < this.y; i++) {
              ret += 'B' + (i + corr) + ' ';
            }

            return ret + this.percentage.toFixed(0) + '%';
          }
        }
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4]
    }, {
      name: 'Jane',
      data: [2, 2, 3]
    }, {
      name: 'Joe',
      data: [3, 4, 4]
    }]
  });
});