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>Split</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/split.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/split.js"></script>

		 </body></html>

JavaScript

/**
 * @demo
 *
 */
const config = {
  type: 'line',
  general: {
    animatable: false
  },
  title: "Column Split Lines",
  split: {
    visible: true,
    cols: 3
  },
  xAxis: [{
    categories: ['성남시', '용인시', '수원시', '일산시', '화성시', '평택시', '안양시', '부천시', '고양시', ' 안산시']
  }, {
    col: 1,
    type: 'linear',
    tick: {
      step: 1
    }
  }, {
    col: 2,
    categories: ['성남시', '용인시', '수원시', '일산시', '화성시', '평택시', '안양시', '부천시', '고양시', ' 안산시']
  }],
  yAxis: {
    guides: [{
      type: 'line',
      col: 0,
      // front: true,
      value: 12,
      label: {
        text: 'line guide',
        effect: 'background',
        style: {
          fill: 'white'
        },
        backgroundStyle: {
          fill: 'black',
          padding: '2px 5px'
        }
      },
      style: {
        stroke: 'blue',
        strokeDasharray: '4'
      }
    }, {
      type: 'range',
      col: [0, 2],
      front: true,
      startValue: 3,
      endValue: 6,
      label: {
        text: 'range guide',
        align: 'right',
        style: {
          fill: 'red'
        }
      }
    }]
  },
  series: [{
    lineType: 'spline',
    pointLabel: true,
    data: [7, 11, 9, 7.5, 15.3, 13, 7, 9, 11, 2.5]
  }, {
    type: 'bar',
    xAxis: 1,
    pointLabel: true,
    data: [7, 10, 8, 6.5, 15.3, 13, 10, 9.5, 11.5, 3.5]
  }, {
    xAxis: 2,
    lineType: 'spline',
    pointLabel: true,
    data: [7, 10, 8, 6.5, 15.3, 13, 10, 9.5, 11.5, 3.5]
  }]
};
let animate;
let chart;
function init() {
  console.log('RealChart v' + RealChart.getVersion());
  // RealChart.setDebugging(true);
  RealChart.setLogging(true);
  chart = RealChart.createChart(document, 'realchart', config, true, () => {
    console.log('LoADED!');
  });
}