JSFiddle - React, Tailwind, and code Playground

by sbochan

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {


    $('#container').highcharts({

        chart: {
            type: 'arearange',
            zoomType: 'x'
        },

        title: {
            text: 'Temperature variation by day'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [
                [1230771600000, -5.8, 0.1],
                [1230858000000, -4.1, 1.4],
                [1230944400000, -0.5, 4.1],
                [1231030800000, -8.9, -0.7],
                [1231117200000, -9.7, -3.7],
                [1231203600000, -3.4, 3.2],
                [1231290000000, -3.9, -0.2],
                [1231376400000, -2.4, 6.7],
                [1231462800000, 3.8, 6.9],
                {x:1231549200000, 
                 high: 3.1, 
                 low:3.1,
                 originalValue:0
                },
                [1231635600000, 4, 4],
                [1231722000000, 5.6, 9.4],
                [1231808400000, 3.6, 6.5]]
        }]
});

});