JSFiddle - React, Tailwind, and code Playground

by sbochan

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; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    }, function (chart) {

        var data = chart.series[2].data,
            len = data.length,
            r = chart.renderer,
            path,
            i;

        for (i = 0; i < len-1; i++) {                
            r.path(['M', data[i].plotX + chart.plotLeft - (data[i].pointWidth / 2), data[i].plotY + chart.plotTop, 'L', data[i].plotX + chart.plotLeft + (data[i].pointWidth / 2), data[i].plotY + chart.plotTop, data[i + 1].plotX + chart.plotLeft - (data[i + 1].pointWidth / 2), data[i + 1].plotY + chart.plotTop])
                .attr({
                stroke: 'red',
                    'stroke-width': 1,
                zIndex: 1
            })
                .add();
        }

    });
});