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="expand">
    拡大
  </button>
  <button id="shrink">
    縮小
  </button>
</p>

JavaScript

(function() {
	var pageController = {
		__name: 'ui.chart.pageController',
		_chartController: h5.ui.components.chart.ChartController, // チャートライブラリ
		__meta: {
			_chartController: {
				rootElement: '#chart'
			}
		},
		_width: 600,
    _height: 480,
    
		__ready: function(context) {
			var series = [this._createNewSeries()];
      
			this._chartController.draw({
				chartSetting: {
					width: this._width,
					height: this._height
				},
				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
			// 系列データ
			});
		},
		"#expand click": function() {
    	this._setChartSetting(this._width *= 2, this._height *= 2);
    },
		"#shrink click": function() {
			this._setChartSetting(this._width /= 2, this._height /= 2);    	
    },
		_setChartSetting: function(width, height) {
			this._chartController.setChartSetting({
				width: width,
				height: height
			});
		},
		_createNewSeries: function() {
			var data = createChartDummyData(400, 100); // ダミーデータを生成

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

	h5.core.expose(pageController);

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

})();

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