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/data.js"></script>

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

    </p>
</figure> -->

<pre>x,y,z
0,9.9,1479468375

</pre>
<pre id="csv">x,y
2017-05-01,9.9
2017-05-02,11.5
2017-05-03,11.8
</pre>

JavaScript

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

    data: {
        csv: document.getElementById('csv').innerHTML,
        parsed: function (columns) {
            const date = columns[0].splice(1);
            const createDate = new Date(date)
            console.log(createDate);

        }
    },

    title: {
        text: 'Monthly mid-day temperature May 2017',
        align: 'center'
    },

    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },

    series: [{
        keys: ['x', 'y'],
    }]
});