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>Annotation Shape</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 = {
  general: {},
  title: {
    text: "Shape Annotations",
    style: {
      fontSize: '40px'
    }
  },
  xAxis: {
    type: 'time',
    tick: {
      stepInterval: '2m'
    },
    label: {
      rotation: -90,
      timeFormat: 'yyyy년 MM월',
      style: {
        fontFamily: 'Arial',
        fontSize: '20px'
      }
    }
  },
  yAxis: {
    minValue: 0,
    tick: {
      stepInterval: 20
    }
  },
  series: {
    name: 'main',
    type: 'line',
    lineType: 'spline',
    marker: false,
    xStart: '2020-01',
    xStep: '2m',
    marker: {
      visible: true
    },
    data: [101, 103, 105, 109, 113, 115, 120, 125, 131, 136, 139, 143, 141, 140, 139, 138, 130, 125, 120, 119, 119, 120, 122, 123],
    style: {
      strokeWidth: '5px'
    }
  },
  body: {
    annotations: [{
      type: 'shape',
      shape: 'rectangle',
      front: true,
      series: 'main',
      x1: new Date(2022, 8),
      x2: new Date(2023, 4),
      y1: 65,
      y2: 145,
      style: {
        fill: 'none',
        stroke: 'var(--color-1)',
        strokeWidth: '5px',
        strokeDasharray: '5'
      }
    }, {
      type: 'shape',
      shape: 'rectangle',
      front: true,
      series: 'main',
      x1: new Date(2021, 9),
      x2: new Date(2021, 11),
      y1: 0,
      y2: 200,
      style: {
        fill: 'white',
        stroke: 'var(--color-1)',
        strokeWidth: '1px'
      }
    }, {
      type: 'shape',
      shape: 'star',
      width: 200,
      height: 200,
      offsetY: -70,
      noClip: true,
      style: {
        fill: '#00884440'
      }
    }, {
      type: 'shape',
      shape: 'star',
      offsetX: 130,
      offsetY: 50,
      width: 100,
      height: 100,
      rotation: -21,
      front: true,
      style: {
        fill: '#00884490',
        stroke: 'blue'
      }
    }, {
      type: 'shape',
      shape: 'star',
      verticalAlign: 'bottom',
      offsetX: -50,
      offsetY: -50,
      width: 200,
      height: 200,
      style: {
...