JSFiddle - React, Tailwind, and code Playground

by anikettiwari

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

JavaScript

$(function () {


    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'scatter'
        },
        title: {
            text: 'Custom waterfall with unequal width'
        },
        xAxis: {
            min: 0,
            max: 50,
            reversed: true
        },
        yAxis: {
            title: {
                text: 'Share'
            },
            min: 0,
            max: 100
        },
        tooltip: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'basicData',
            visible: true, //for demonstration purpose
            data: [
                [50, 40],
                [45, 48],
                [39, 52],
                [33, 68],
                [22, 75],
                [15, 89],
                [5, 100]
            ]
        }]
    },
    //add function for custom renderer
    function (chart) {

        var points = this.series[0].data,
            addMarginX = this.plotLeft,
            addMarginY = this.plotTop,
            xZero = this.series[0].points[0].plotX,
            yZero = this.chartHeight - addMarginY - this.yAxis[0].bottom,
            xAll = [],
            yAll = [],
            widthAll = [],
            heightAll = [];

        //renderer group for all rectangulars
        rectGroup = chart.renderer.g()
            .attr({
            zIndex: 5
        })
            .add();

        //draw for each point a rectangular
        for (var i = 0; i < points.length; i++) {

            var x = points[i].plotX + addMarginX,
                y = points[i].plotY + addMarginY,
                width,
                height;

            if (i === 0) { //for the first rect height is defined by pixel difference of yAxis and yValue
                height = yZero - points[i].plotY
            } else { // else height is pixel difference...