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>Update Point</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

/**
 * @demo
 *
 */
const data = RealChart.createData('main', [['신흥1동', 3904], ['신흥2동', 19796], ['신흥3동', 10995], ['태평1동', 14625], ['태평2동', 14627], ['태평3동', 12649], ['태평4동', 12279]]);
const config = {
  options: {},
  title: 'Chart Data',
  legend: true,
  body: {
    style: {
      stroke: 'none'
    }
  },
  xAxis: {
    label: {
      style: {}
    },
    grid: {
      visible: true,
      lastVisible: true
    },
    tick: true,
    title: {
      text: '수정구'
    },
    // grid: true,
    crosshair: true
  },
  yAxis: {
    title: {
      text: '전체 인구수'
    },
    unit: '(명)',
    label: {
      lastText: '${label}<br>${axis.unit}',
      lastStyle: {
        fontWeight: 'bold'
      }
    }
  },
  series: {
    pointLabel: true,
    data,
    pointStyleCallback: args => {
      if (args.yValue > 30000) {
        return {
          fill: 'blue',
          stroke: 'blue'
        };
      } else if (args.yValue < 5000) {
        return {
          fill: 'red',
          stroke: 'red'
        };
      }
    }
  }
};
let animate;
let chart;
let timer;
let dong = 1;
function init() {
  console.log('RealChart v' + RealChart.getVersion());
  // RealChart.setDebugging(true);
  RealChart.setLogging(true);
  chart = RealChart.createChart(document, 'realchart', config);
  const button = document.createElement('button');
  button.innerHTML = 'update value';
  document.body.appendChild(button);
  button.addEventListener('click', () => {
    const val = chart.series.getValueAt(0);
    chart.series.updatePoint(0, val + 1000);
  });
}