JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

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

JavaScript

$(function () {
    Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'translate', function (proceed) {
        proceed.apply(this, [].slice.call(arguments, 1));
        var series = this,
            cpw = 0.166,
            shapeArgs,
            x, y, h, w;

        Highcharts.each(series.points, function (point) {
            shapeArgs = point.shapeArgs;
            x = shapeArgs.x;
            y = shapeArgs.y;
            h = shapeArgs.height;
            w = shapeArgs.width;

            point.shapeType = 'path';
            if (point.negative) {
                point.shapeArgs = {
                    d: [
                        'M', x, y,
                        'L', x, y + h - h/2,
                        'C', x, y + h + h/5, x + w, y + h + h/5, x + w, y + h - h/2, 'L', x + w, y,
                        'L', x, y]
                };
            } else {
                point.shapeArgs = {
                    d: [
                        'M', x, y ,
                        'L', x, y + h,
                        'L', x + w, y + h,
                        'L', x + w, y + h/2 ,
                        'C', x + w, y - h/5, x, y - h/5, x, y + h/2]
                };
            }
        });
    });


    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        series: [{
            data: [2, 1.3, -1.2, 1.3, 1.2]
        }]
    });
});