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/modules/heatmap.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() {
       var chart = null;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
		type: 'heatmap',
		inverted: true,
		spacingBottom: 40,
		spacingTop: 20,
		backgroundColor: '#D2E4B4'
            },
            title: {
                text: "HOW LONG A HUMAN CAN LIVE WITHOUT...",
		style: {
		    fontFamily: 'Oswald',
		    fontSize: '22px'
		}
            },
            xAxis: {
		tickWidth: 0,
                categories: [ 'Food', '', 'Water', '', 'Sleep', '', 'Internet' ],
		lineWidth: 0,
		labels: {
		    style: {
			color: '#030200',
			fontSize: '13px'
		    }
		}
            },
            yAxis: {
		title: {
		    text: null
		},
		gridLineWidth: 0,
		minorTickWidth: 1,
		minorTickInterval: 0.5,
		minorTickLength: 5,
		minorGridLineColor: '#D2E4B4',
		tickWidth: 2,
		tickColor: '#C1C1C1',
		tickLength: 10,
		max: 8,
		min: 0,
		offset: 8,
		labels: {
		    y: 30,
		    style: {
			color: '#030200',
			fontSize: '12px'
		    },
                formatter: function() {
		    // console.log(this.value);
                    switch (this.value) {
                       case 1: return 'A couple of hours';
                       case 3: return '4-5 days';
                       case 5: return 'A week';
                       case 7: return 'A month';
			default: return '';
                    }
                }
		}
            },
            credits: {
		text: 'Source: truthfacts.com' ,
		    style: {
			color: '#030200'
		    }
	    },
	    legend: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                heatmap: {
		    // Same as bg color
		    nullColor: '#D2E4B4',
		borderWidth: 1,
		borderColor: '#D2E4B4',
                },
            },
            colorAxis: {
                dataClasses: [{
                    color:...