JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/chart/src/chart.css">
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/chart/src/graphic-renderer.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/chart/src/chart.js"></script>
<div id="chart" ></div>
<p>
  <button id="add">
  データ系列追加
  </button>
</p>

JavaScript

(function() {
	var pageController = {
		__name: 'ui.chart.pageController',
		_chartController: h5.ui.components.chart.ChartController, // チャートライブラリ
		__meta: {
			_chartController: {
				rootElement: '#chart'
			}
		},

		__ready: function(context) {
			var series = [this._createNewSeries()];
      
			this._chartController.draw({
				chartSetting: {
					width: 600,
					height: 480
				},
				axes: {
					xaxis: {
						off: true
					},
					yaxis: { // y軸
						lineNum: 6, // y軸の補助線の数(上部は含む)
						fontSize: '12pt', // ラベルのフォントサイズ
						autoScale: function(min, max) { // オートスケールの定義
							return {
								rangeMax: Math.ceil(max / 500) * 500,
								rangeMin: 260
							};
						},
					}
				},
				seriesDefault: { // すべての系列のデフォルト設定
					dispDataSize: 100,
				},
				series: series
			// 系列データ
			});
		},
		
    "#add click": function() {
			this._chartController.addSeries([this._createNewSeries()]);
    },
    
		_createNewSeries: function() {
			var data = createChartDummyData(400, 100); // ダミーデータを生成

			// 系列定義
      var color = GenerateColor();
      
			return {
				name: 'series_'+color,
				type: 'stacked_line',
				data: data,
				propNames: {
					y: 'val'
				},
        fillColor: "#" + GenerateColor(),
				color: "#" + color
			};
		}
	};

	h5.core.expose(pageController);

  /**
	 * ダミーデータ生成関数
	 */
	function createChartDummyData(median, vibration) {
		var ret = [];
		for (var i = 0; i < 100; i++) {
			ret.push({
				val: median + (Math.random() - 0.5) * vibration * 2
			});
		}
		return ret;
	}
	
  function GenerateColor() {
    return Math.floor(Math.random()*16777215).toString(16); 
  }
  
})();

$(function() {
	h5.core.controller('body', ui.chart.pageController);
})