JSFiddle - React, Tailwind, and code Playground

by Hayk Aghabekyan

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 ranges = [
			[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]
		],
		averages = [
			[1246406400000, 21.5],
			[1246492800000, 22.1],
			[1246579200000, 23],
			[1246665600000, 23.8],
			[1246752000000, 21.4]
		],
        averages2 = [
			[1246406400000, 22],
			[1246492800000, 23.1],
			[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: true,
		        valueSuffix: '°C'
		    },
		    
		    legend: {
		    },
		
		    series: [{
		    	name: 'Temperature',
		    	data: averages,
		    	zIndex: 1,
		    	marker: {
		    		fillColor: 'white',
		    		lineWidth: 2,
		    		lineColor: Highcharts.getOptions().colors[0]
		    	}
		    }, {
		        name: 'Range',
		        data: ranges,
		        type: 'arearange',
		        lineWidth: 0,
		    	linkedTo: ':previous',
		    	color: Highcharts.getOptions().colors[0],
		    	fillOpacity: 0.3,
		    	zIndex: 0
		    },{
		    	name: 'Color',
		    	data: averages2,
		    	zIndex: 1,
		    	marker: {
		    		fillColor: 'white',
		    		lineWidth: 2,
		    		lineColor: Highcharts.getOptions().colors[0]
		    	}
		    }, {
		        name: 'Range',
		        data: ranges2,
		        type: 'arearange',
		        lineWidth: 0,
		    	linkedTo: ':previous',
		    	color: "pink",
		    	fillOpacity: 0.3,
		    	zIndex: 0
		    }]
		
		});
    
});