JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Area Range </title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realchart {
	width: 850px;
	height: 550px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
	
</script>

  <script>
    var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
  </script>
</head>
<body>
	<div id="realchart"></div>
	

		 </body></html>

JavaScript

const config = {
  xAxis: {
    type: 'time',
    grid: true
  },
  yAxis: {
    title: 'Temparature',
    tick: true
  },
  series: {
    type: 'arearange',
    data: [[20.6, 17.2], [25.9, 18.7], [22.4, 17.7], [20.9, 14.1], [20.4, 15.1], [19.3, 6.6], [9.9, 3.6], [16.1, 1.8], [18.4, 5.9], [9.1, 0.5], [6.7, -1.9], [5.7, -2], [6.7, -2.2], [10.8, -0.8], [12.5, 2], [7.4, 5.7], [5.9, -1.9], [5.7, -3.8], [13.4, -0.3], [12.8, 1.8], [14.8, 1.4], [15.1, 2.9], [14.6, 1.9], [2.2, -4.4], [4, -5.9], [7.2, -0.1], [9.3, 4.4], [4, -3], [2.4, -5.6], [1.4, -7.8]],
    xStart: '2023-11-01',
    xStep: '1d',
    marker: false,
    style: {
      fill: '#66d0ff',
      stroke: 'none'
    }
  }
};
let animate = false;
let chart;
function init() {
  chart = RealChart.createChart(document, 'realchart', config);
}