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>Heatmap</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" src="https://unpkg.com/realchart/heatmap.js"></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>
	<script type="text/javascript" src="https://unpkg.com/realchart/heatmap.js"></script>

		 </body></html>

JavaScript

const config = {
  title: {
    text: '2011년 - 서울 주차별 평균 온도',
    align: 'left',
    gap: 15
  },
  body: {
    annotations: [{
      type: 'image',
      align: 'right',
      offsetX: -5,
      offsetY: -55,
      width: 300,
      imageUrl: 'https://www.realchart.co.kr/demo/assets/images/colors.png',
      style: {
        border: '1px solid #000'
      }
    }]
  },
  name: 'heatmap',
  general: {},
  credits: {
    visible: true
  },
  xAxis: {
    categories: ['1주', '2주', '3주', '4주', '5주', '6주', '7주', '8주', '9주', '10주', '11주', '12주', '13주', '14주', '15주', '16주', '17주', '18주', '19주', '20주', '21주', '22주', '23주', '24주', '25주', '26주', '27주', '28주', '29주', '30주', '31주', '32주', '33주', '34주', '35주', '36주', '37주', '38주', '39주', '40주', '41주', '42주', '43주', '44주', '45주', '46주', '47주', '48주', '49주', '50주', '51주', '52주']
  },
  yAxis: {
    title: '요일',
    categories: ['일', '월', '화', '수', '목', '금', '토']
  },
  series: {
    viewRangeValue: 'z',
    viewRanges: [{
      fromValue: -20,
      toValue: -18,
      color: '#339AF0'
    }, {
      fromValue: -18,
      toValue: -16,
      color: '#339AF0E6'
    }, {
      fromValue: -16,
      toValue: -14,
      color: '#339AF0CC'
    }, {
      fromValue: -14,
      toValue: -12,
      color: '#339AF0B3'
    }, {
      fromValue: -12,
      toValue: -10,
      color: '#339AF099'
    }, {
      fromValue: -10,
      toValue: -8,
      color: '#339AF080'
    }, {
      fromValue: -8,
      toValue: -6,
      color: '#339AF066'
    }, {
      fromValue: -6,
      toValue: -4,
      color: '#339AF04D'
    }, {
      fromValue: -4,
      toValue: -2,
      color: '#339AF033'
    }, {
      fromValue: -2,
      toValue: -0,
      color: '#339AF01A'
    }, {
      fromValue: 0,
      toValue: 2,
      color: '#339AF00D'
    }, {
      fromValue: 2,
      toValue: 4,
      color: '#FF922B0D'
    }, {
      fromValue: 4,
      toValue: 6,
      color: '#FF922B1A'
    }, {
      fromValue: 6,
      toValue: 8,
      color:...