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',
            width: 700,
            height: 350
        },
        title: {
            text: "The global wealth pyramid",
            align: 'left',
            x: 0,
	    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'
	    }

        },
        series: [{
            type: 'pyramid',
            width: '70%',
            reversed: true,
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> ({point.y:,.1f}%)',
                },
            data: [{
                name: '3,207 m',
                y: 68.7,
                color: 'rgb(159, 192, 190)'
            }, {
                name: '1,066 m',
                y: 22.9,
                color: 'rgb(140, 161, 191)'
            }, {
                name: '361 m',
                y: 7.7,
                color: 'rgb(159, 165, 157)'
            }, {
                name: '32 m',
                y: 0.7,
                color: 'rgb(24, 52, 101)'
            }]
        }]
    });

});