JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<script>
    var seriesTypes = Highcharts.seriesTypes,
            defaultPlotOptions = Highcharts.getOptions().plotOptions;

        defaultPlotOptions.waterfall_with_full_endpoints = Highcharts.merge(defaultPlotOptions.waterfall);

        seriesTypes.waterfall_with_full_endpoints = Highcharts.extendClass(seriesTypes.waterfall, {
            type: 'waterfall_with_full_endpoints'
        });

        var math = Math,
            mathRound = math.round,
            mathFloor = math.floor,
            mathMax = math.max;

        /**
         * It sets y=0 for the last point.
         **/
        seriesTypes.waterfall_with_full_endpoints.prototype.translate = function () {
            var series = this,
                options = series.options,
                yAxis = series.yAxis,
                len,
                i,
                points,
                point,
                shapeArgs,
                stack,
                y,
                yValue,
                previousY,
                previousIntermediate,
                range,
                threshold = options.threshold,
                stacking = options.stacking,
                tooltipY;

            // run column series translate
            seriesTypes.column.prototype.translate.apply(this);

            previousY = previousIntermediate = threshold;
            points = series.points;

            for (i = 0, len = points.length; i < len; i++) {
                // cache current point object
                point = points[i];
                yValue = this.processedYData[i];
                shapeArgs = point.shapeArgs;

                // get current stack
                stack = stacking && yAxis.stacks[(series.negStacks && yValue < threshold ? '-' : '') +...

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'waterfall_with_full_endpoints'
        },          

        legend: {
            enabled: false
        },        

        series: [{            
            data: [{
                name: 'Start',
                y: 120000
            }, {
                name: 'Product Revenue',
                y: 569000
            }, {
                name: 'Service Revenue',
                y: 231000
            }, {
                name: 'Positive Balance',      
                y: 100000
            }, {
                name: 'Fixed Costs',
                y: -342000
            }, {
                name: 'Variable Costs',
                y: -233000
            }, {
                name: 'Balance',
                y: 100000
            }],
            dataLabels: {
                enabled: true                
            }            
        }]
    });
});