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="go">
    進む
  </button>
  <button id="back">
    戻る
  </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: 10,
				},
				series: series
			// 系列データ
			});
		},
    
    "#go click": function() {
			var movedNum = this._chartController.go(1);
			if (movedNum === 1) {
				return;
			}
      // 追加データ生成
      addData = [{name: 'series_1', data: createChartDummyData(400, 100, 1)[0]}];
      // データ追加
      this._chartController.addData(addData);
    },
		
		"#back click": function() {
    	this._chartController.back(1);
    },
    
		_createNewSeries: function() {
			var data = createChartDummyData(400, 100); // ダミーデータを生成

			// 系列定義
			return {
				name: 'series_1',
				type: 'line',
				data: data,
				propNames: {
					y: 'val'
				},
				color: 'blue'
			};
		}
	};

	h5.core.expose(pageController);

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

})();

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