JSFiddle - React, Tailwind, and code Playground

by Jawad Ameen

HTML

<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=""></div>

JavaScript

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

        title: {
            text: 'Highcharts Waterfall'
        },

        xAxis: {
            type: 'category'
        },

        yAxis: {
            title: {
                text: 'USD'
            }
        },

        legend: {
            enabled: false
        },

        tooltip: {
            pointFormat: '<b>${point.y:,.2f}</b> USD'
        },

        series: [{
            upColor: Highcharts.getOptions().colors[2],
            color: Highcharts.getOptions().colors[3],
            data: [{
	"name": "Product (+)",
	"color": "#CCCCCC",
	"y": 10.1
}, {
	"name": "Consulting Services (+)",
	"color": "#CCCCCC",
	"y": 7.7
}, {
	"name": "The service\/project delivery (+)",
	"color": "#CCCCCC",
	"y": 7.1
}, {
	"name": "Account Management (+)",
	"color": "#CCCCCC",
	"y": 6.1
}, {
	"name": "Customer services (+)",
	"color": "#CCCCCC",
	"y": 4.8
}, {
	"name": "The post-delivery (onsite support, follow-up meetings, etc.) (+)",
	"color": "#CCCCCC",
	"y": 3.9
}, {
	"name": "The purchase (+)",
	"color": "#CCCCCC",
	"y": 3.2
}, {
	"name": "The service\/project delivery (-)",
	"color": "#CCCCCC",
	"y": 0
}, {
	"name": "The post-delivery (onsite support, follow-up meetings, etc.) (-)",
	"color": "#FF0000",
	"y": -0.8
}, {
	"name": "The purchase (-)",
	"color": "#FF0000",
	"y": -3.9
}, {
	"name": "Customer services (-)",
	"color": "#FF0000",
	"y": -5.1
}, {
	"name": "Consulting Services (-)",
	"color": "#FF0000",
	"y": -5.2
}, {
	"name": "Account Management (-)",
	"color": "#FF0000",
	"y": -6
}, {
	"name": "Product (-)",
	"color": "#FF0000",
	"y": -8.1
}, {
	"name": "TOTAL NPS",
	"color": "#666",
	"y": 13.8,
  "isSum": true

}],
            dataLabels: {
                enabled: true,
                yle: {
                    color: '#FFFFFF',
                    fontWeight: 'bold',
                    textShadow: '0px 0px 3px black'
                }
       ...