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 Group</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 = {
  type: 'area',
  title: '연령별 심혈관 건강 지표 비교',
  series: [{
    lineType: 'spline',
    children: [{
      name: '여자',
      data: [118, 138, 120, 232, 473, 222, 254, 226, 380, 385, 130, 264, 350, 520, 136, 396, 645, 575, 474, 518, 806, 174, 522, 275, 982, 657, 450, 605, 474, 373, 120, 140, 382, 120, 140]
    }, {
      name: '남자',
      data: [130, 118, 368, 130, 396, 258, 402, 717, 794, 757, 1102, 599, 511, 598, 740, 368, 563, 974, 1563, 665, 1421, 562, 1007, 1795, 1625, 1915, 927, 830, 498, 545, 938, 503, 552, 777, 442]
    }]
  }]
};
let animate = false;
let chart;
function init() {
  chart = RealChart.createChart(document, 'realchart', config);
}