JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<!--<script src="http://code.highcharts.com/highcharts.js"></script>-->
<script src="http://github.highcharts.com/highcharts.js"></script>
<div id="container" style="margin: 0 auto"></div>

JavaScript

$(function () {
    var categories = ['A', 'B', 'C'];
    var H = Highcharts;

    function fixMinPointLength(e) {
        console.log(this);
        var chart = this,
            series = chart.series,
            sLen = series.length,
            mpl = chart.options.plotOptions.bar.minPointLength,
            mplValue = chart.yAxis[0].toValue(chart.yAxis[0].toPixels(0) + mpl, true),
            compareTranslations,
            sum, i, posNeg, s;
        for (j = sLen; j > 0; j--) {
            s = series[j - 1];
            s.translations = [];
            H.each(s.data, function (p) {
                posNeg = p.y < 0 ? 0 : 1;
                if (!s.visible) {
                    s.translations.push(
                    [0, 0]);
                } else if (p.y < 0) {
                    s.translations.push(
                    [p.x < mplValue ? mpl : p.shapeArgs.height, 0]);
                } else {
                    s.translations.push(
                    [0, p.x < mplValue ? -mpl : -p.shapeArgs.height]);
                }
                sum = 0;
                for (i = sLen - 1; i > s.index; i--) {
                    compareTranslations = series[i].translations; //get previous translations
                    sum += compareTranslations[p.x][posNeg];

                }
                if (p.graphic) {
                    p.graphic.attr({
                        transform: 'translate(0, ' + sum + ')'
                    });
                }
            });
        }
    }

    $(document).ready(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar',
                events: {
                    redraw: fixMinPointLength,
                    load: fixMinPointLength
                }
            },
            title: {
                text: 'Minimum Point Length On Stacked Bar'
            },
            xAxis: [{
                categories: categories,
                reversed: false,
                labels: {
 ...