JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/funnel.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
    <body>
    <div>
    <div id="container" ></div>
    </div>
    </body>

JavaScript

document.title = "Highcharts " + Highcharts.version;

$(document).ready(function() {

    // Size of each category in the pyramid - not following the percentage value
    var catSize = {
        poor: 40,
        middleclass: 30,
        welloff: 20,
        rich: 10
    };

    // The label at the pyramid. Top 0, bottom 100
    var labYPos = {
        poor: 80,
        middleclass: 45,
        welloff: 20,
        rich: 8
    };

    var chart = null;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            // X-axis title to show
            showAxes: true,
            width: 700,
            height: 350,
	    // Apply to all the data labels
	    style: {
		fontSize: '11px'
	    },
	    spacingLeft: 30,
	    spacingRight: 0
        },
        title: {
            text: "The global wealth pyramid",
            align: 'left',
            x: -20,
	    style: {
		fontSize: '13px',
		fontWeight: 'bold'
	    }
        },
        tooltip: {
            enabled: false
        },
        credits: {
            text: 'Source: James Davies, Rodrigo Lluberas and<br>Antony Shorrocks, Credit Suisse Global Wealth<br>Databook 2013',
            position: {
		align: 'left',
		verticalAlign: 'top',
		y: 40,
		x: 10
	    },
	    style: {
		fontSize: '9px'
	    }

        },
        xAxis: {
            title: {
                text: "Number of adults (percentage of world population)",
		style: {
		    fontSize: '12px'
		}
            },
            lineWidth: 0
        },
        yAxis: [{
            // Left Y-axis
	    title: {
		align: 'low',
		text: 'Wealth',
		rotation: 0,
                x: 30,
		style: {
		    fontSize: '12px'
		}
	    },
            // Don't show the numbers
            labels: {
                enabled: false
            },
	    gridLineWidth: 0,
	    min: 0,
	    max: 100,
	    reversed: true,
	    showEmpty: true,
	    plotLines: [{
		value: labYPos.poor,
		label: {
		    text: '< USD 10,000',
		    x:...