JSFiddle - React, Tailwind, and code Playground

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: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

	var ranges1 = [
			[1246406400000, 14.3, 27.7],
			[1246492800000, 14.5, 27.8],
			[1246579200000, 15.5, 29.6],
			[1246665600000, 16.7, 30.7],
			[1246752000000, 16.5, 25.0]
		],
        ranges2 = [
			[1246406400000, 18.3, 23.7],
			[1246492800000, 15.5, 22.8],
			[1246579200000, 16.5, 26.6],
			[1246665600000, 19.7, 31.7],
			[1246752000000, 16.5, 27.0]
		],
		averages1 = [
			[1246406400000, 21.5],
			[1246492800000, 22.1],
			[1246579200000, 23],
			[1246665600000, 23.8],
			[1246752000000, 21.4]
		],
        averages2 = [
			[1246406400000, 22],
			[1246492800000, 18],
			[1246579200000, 24],
			[1246665600000, 25.8],
			[1246752000000, 20.4]
		];

    
    	$('#container').highcharts({
    	
		    title: {
		        text: 'July temperatures'
		    },
		
		    xAxis: {
		        type: 'datetime'
		    },
		    
		    yAxis: {
		        title: {
		            text: null
		        }
		    },
		
		    tooltip: {
		        crosshairs: true,
		        shared: false,
		        valueSuffix: '°C',
                formatter: function () {
                    var that = this;
                    if(this.series.options.hasOwnProperty("ranges")) {
                        var min, max;
                        $.each(this.series.options.ranges, function (i, point) {
                            if(point[0] == that.x) {
                                min = point[1];
                                max = point[2];
                            }
                        });
                        return "min/max range: " + min + " - " + max;
                    }
                }
		    },
		    
		    legend: {
		    },
		
		    series: [{
                name: "line 1",
                data: averages1,
                ranges: ranges1,
                zIndex: 1,
                marker: {
                    fillColor: 'white',
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[0]
                }
           ...