JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
				    chart: {
				    	zoomType: 'xy',
				        type: 'waterfall',
				         style: {
				    		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
							fontSize: '11px',
							fontWeight: 'lighter'       
				}
				    },

				  title: { 
				        text: "WATERFALL",
				        style: {
				            fontSize: '15px',
				    		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
							fontWeight: 'lighter'  
						}
				    },
				   xAxis: [{
        offset: -300,
        tickWidth: 0,
        lineWidth: 0,
        categories: ['ONE', 'TWO', 'THREE','FOUR'],
        labels: {
            x: 5,
            useHTML: true,
            style:{
            color: 'red'
            },
            formatter: function () {
                return this.value;
            }
        }
    }, {
        linkedTo: 0,
        categories: ['ONE', 'TWO', 'THREE','FOUR']
    }],

				    yAxis: {
				        allowDecimals: false,
				        title: {
				            text: '%',
				            style: {
				        		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
								fontSize: '11px',
								fontWeight: 'lighter'  
							}
				        },
				        	labels:{
						  		style: {
				            		fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
									fontSize: '11px',
									fontWeight: 'lighter'  
						}
					}
				    },

				       tooltip: {
               enabled: false
				    },
				       legend: {
				       	enabled: false
				       },
					    series: [
					    {	pointPlacement: 0.15,
					        upColor:'#5cb85c',
					        color: '#d9534f',
					        showInLegend : false,
					        data: [{
					            name: 'ONE',
					            y: 1000,
					            color: 'rgb(0, 44, 119)'
					        }, {
					            name: 'TWO',
					            y: 900
					        }, {
					            name: 'THREE',
					             isIntermediateSum: true,
					           ...