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

var tons_index = 0;
Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    colors: [
    		'#005eb8','#fff','#fff','#fff'
    ],
    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: {
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            },
            formatter: function () {
                var stack_label = this.axis.series[tons_index].options.tons+ '  Million tones';
                tons_index++;
                return stack_label;
            }
        }
    },
    legend: {
      enabled: false
    },
    tooltip: {
    		enabled: false
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
      			borderWidth: 0,
            dataLabels: {
                enabled: true,
                formatter: function () {
                	if (this.y > 0) {
                  	return this.y+ ' %';
                  }
                }
            }
        }
    },
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          chart: {
            inverted: false
          },
          legend: {
            align: 'center',
            verticalAlign: 'bottom',
            layout: 'horizontal'
          }
        }
      }]
    },
    series: [{
        name: 'a',
        data: [49],
        tons : 120
    }, {
        name: 'b',
        data: [0, 29.9],
        tons : 68,
        borderWidth: 2,
        borderColor: '#005eb8'
    }, {
        name: 'c',
        data: [0, 0, 14.4],
        tons : 9.2,
        borderWidth: 2,
        borderColor: '#005eb8'
    }, {
        name: 'd',
        data: [0, 0,...