JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

JavaScript

$(function () {

    var ranges = [
            [1246406400000, 14.3, 27.7],
            [1246492800000, 14.5, 27.8],
            [1246579200000, 15.5, 28.6],
            [1246665600000, 16.7, 28.7],
            [1246752000000, 16.5, 25.0],
            [1246838400000, 17.8, 22.7],
            // low-high becomes high-low here
            [1246924800000, 20.8, 19.5],
            [1247011200000, 21.4, 17.5],
            [1247097600000, 23.8, 15.2],
            [1247184000000, 21.8, 14.6],
            [1247270400000, 23.7, 13.7],
            [1247356800000, 23.3, 13.0],
            [1247443200000, 23.7, 12.6],
            [1247529600000, 20.7, 12.8]
        ]


    Highcharts.chart('container', {

        title: {
            text: 'Cross-over'
        },

        xAxis: {
            type: 'datetime'
        },

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

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

        legend: {
        },

        series: [{
            name: 'Range',
            data: ranges,
            type: 'areasplinerange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }]
    });
});