JSFiddle - React, Tailwind, and code Playground

by Emanuel Valdés

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 450px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {

        Highcharts.chart('container', {

        chart: {
            type: 'heatmap',
            plotBorderWidth: 1
        },
        title: {
            text: 'Máximos de MP2.5 pronosticados',
            x: -20
        },
        subtitle: {
            text: 'Fecha: 06-12-2016. Hora Local',
            x: -20
        },
        xAxis: {
            categories: ['06-12', '07-12', '08-12']
        },
        yAxis: {
            categories: ['Independencia', 'La Florida', 'Las Condes', 'Parque Ohiggins', 'Pudahuel', 'Cerrillos', 'El Bosque', 'Cerro Navia', 'Puente Alto', 'Talagante', 'Quilicura'],
            title: null
        },
        credits: {
              enabled: false
        },
        colorAxis: {
            dataClasses: [{
                    to: 50,
                    color: 'rgb(0, 204, 0)',
                    name: 'Norma' 
                }, {
                    from: 51,
                    to: 80,
                    color: 'rgb(230, 247, 0)',
                    name: 'Regular' 
                }, {
                    from: 81,
                    to: 110,
                    color: 'rgb(255, 153, 0)',
                    name: 'Alerta' 
                }, {
                    from: 110,
                    to: 170,
                    color: 'rgb(230, 0, 0)',
                    name: 'Pre-Emergencia'                   
                }, {
                    from: 171,
                    color: 'rgb(128, 0, 128)',
                    name: 'Emergencia'                     
                }]
        },
        legend: {
                title: {
                    text: 'Categorías',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    },
                },
                align: 'right',
                verticalAlign: 'middle',
                layout: 'vertical',
                valueDecimals: 0,
               ...