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
            },
            title: {
                text: "Feeling the Heat: Global Inflation",
		align: 'left',
		style: {
		    fontSize: '14px'
		}
            },
            subtitle: {
                text: "From Aug 2010 - Aug 2011",
		align: 'left',
		style: {
		    fontSize: '12px'
		}
            },
            xAxis: {
		tickWidth: 0,
		// Only show a subset of countries
                categories: [ 'United States', 'Japan', 'United Kingdom', 
                              'Venezuela', 'Singapore', 'Switzerland', 'China' ]
            },
            yAxis: {
		title: {
		    text: null
		},
		opposite: true,
		offset: 8,
		categories: [ 'Aug 2010', 'Sept', 'Oct', 'Nov', 'Dec',
			      'Jan 2011', 'Feb', 'Mar', 'Apr', 'May',
			      'Jun', 'Jul', 'Aug' ]
            },
            credits: {
		text: 'Sources: CEIC Data; national statistical agencies, <br>' +
		      'Eurostat and the International Monetary Fund via <br>' +
		      'CEIC Data (<i>From Wall Street Journal</i>)',
		position: {
		    y: -30,
		}
	    },
	    legend: {
		align: 'right',
		verticalAlign: 'top',
		floating: true,
		x: -60,
		y: -5
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                heatmap: {
                }
            },
            colorAxis: {
/*
		dataClasses: [{
		    color: '#749BCC',
		    from: -0.9,
		    to: -0.8
		}, {
		    color: '#C1C1C1',
		    from: -0.1,
		    to: 0.1

		}],

		minColor: '#749BCC',
		maxColor: '#93212E',
		
		stops: [
		    [0.04, '#ECACA8' ],
                    [1.0, '#93212E']
		]
*/
		min: -0.9,
		max: 30,
		stops: [
		    // -10 (Highcharts won't stick to -0.9)
                    [0,...