JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['PACKAGING PAPERS<br>AND BOARDS', 'CASE MATERIALS', 'OTHER PACKAGING & PAPER','WRAPPINGS']
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
          text: null,
        },
        labels: {
          enabled: false,
        },
        stackLabels: {
            enabled: true,
            style: {
                //fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            },
            formatter: function () {
            		console.log(this);
            		return this.total+ '  Million tones';
            }
        }
    },
    legend: {
      enabled: false
    },
    tooltip: {
    		enabled: false
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                formatter: function () {
                //console.log(this.y);
                	if (this.y > 0) {
                  	return this.y+ ' %';
                  }
                }
            }
        }
    },
    series: [{
        name: 'a',
        data: [49],
        total : 120
    }, {
        name: 'b',
        data: [0, 29.9],
        tons : 68
    }, {
        name: 'c',
        data: [0, 0, 14.4],
        tons : 9.2
    }, {
        name: 'd',
        data: [0, 0, 0,4.7],
        tons : 3
    }]
});