JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <!-- <p class="highcharts-description">

    </p> -->
</figure>

JavaScript

const dateFormat = Highcharts.dateFormat;

const data = [{
    date: '2017-05-01',
    temperature: 9.9
},
{
    date: '2017-05-02',
    temperature: 11.5
},
{
    date: '2017-05-03',
    temperature: 11.8
}
];


Highcharts.chart('container', {
    chart: {
        type: 'heatmap'
    },

    title: {
        text: 'Mid-day temperature May 2017',
        align: 'center'
    },
    subtitle: {
        text: 'Degrees Celcius',
        align: 'center'
    },
    tooltip: {
        enabled: true
       /*formatter: function () {
            const date = dateFormat('%a %e. %B %Y', this.point.date);
            if (this.point.value === null) {
                return false;
            }
            return date;

        }*/
    },


    xAxis: {
        categories: weekdays,
        opposite: true,
        lineWidth: 30,
        lineColor: '#BBBAC5',
        labels: {
            rotation: 0,
            padding: 0,
            y: 6,
            x: 0,
            useHTML: true,
            format: '<div class="day-label">{value}</div>'
        }
    },

    yAxis: {
        labels: {
            enabled: false
        },
        title: {
            enabled: false
        },
        min: 0,
        max: 4
    },
    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'middle',
        symbolHeight: 200
    },
    colorAxis: {
        min: 0,
        stops: [
            [0.2, 'lightblue'],
            [0.4, '#CBDFC8'],
            [0.6, '#F3E99E'],
            [0.9, '#F9A05C']
        ]
    },
    plotOptions: {
        series: {
            dataLabels: {
                formatter: function () {
                    if (this.point.value !== null) {
                        return this.point.value + '°C';
                    }
                }
            }
        }
    },
    series: [{
        keys: ['x', 'y', 'value', 'date', 'id'],
        data: data,
        nullColor: 'whitesmoke',
        borderWidth: 2,
       ...