JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
	/* 各種プロパティの設定 */
  // X軸
  var pr_AxisX={};
  	pr_AxisX.valueFormatString="MM/DD HH:mm";
  	pr_AxisX.gridThickness=1;
  	pr_AxisX.labelMaxWidth=50;
  	pr_AxisX.labelAutoFit=!0;

  // Y1軸（左）
  var pr_AxisY1={};
  	pr_AxisY1.title="水位（APm）";
  	pr_AxisY1.lineColor="#C24642";
  	pr_AxisY1.tickColor="#C24642";
  	pr_AxisY1.includeZero=true;
  	pr_AxisY1.minimum=0;
  	pr_AxisY1.maximum=20;
  	pr_AxisY1.titleFontSize=12;
  // Y2軸（右）
  var pr_AxisY2 = [new Object(), new Object()];
    pr_AxisY2[0].title = "10分雨量（mm）/ 時間雨量（mm/h）";
    pr_AxisY2[0].lineColor = "#7F6084";
    pr_AxisY2[0].tickColor = "#7F6084";
    pr_AxisY2[0].includeZero = true;
    pr_AxisY2[0].minimum = 0;
    pr_AxisY2[0].maximum = 50;
    pr_AxisY2[0].titleFontSize = 12;

    pr_AxisY2[1].title = "累加雨量（mm）";
    pr_AxisY2[1].lineColor = "#369EAD";
    pr_AxisY2[1].tickColor = "#369EAD";
    pr_AxisY2[1].includeZero = true;
    pr_AxisY2[1].minimum = 0;
    pr_AxisY2[1].maximum = 200;
    pr_AxisY2[1].titleFontSize = 12;

  var zoomset={};
  zoomset.zoomEnabled=true;
  zoomset.Type="xy"
  
  var chart = new CanvasJS.Chart("chartContainer", {
	title:{
		text: ""
	},
  zoomEnabled:zoomset.zoomEnabled,
  zoomType: zoomset.Type,  
  legend: {
	  reversed: true,
  },
	axisX:pr_AxisX,
	axisY:pr_AxisY1,
	axisY2:pr_AxisY2,
  toolTip: {
		shared: true,
    reversed: true,
    cornerRadius: 4,
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	dataPointMaxWidth: 5,
  dataPointMinWidth: 3,
	data: [{
		type:"column",
		name: "10分雨量",
		color: "#0000a6",
		axisYType: "secondary",
		axisYIndex: 0,
		showInLegend: true,
 		yValueFormatString: "0.0",
    toolTipContent: "<div class='ttpTitle'>10分雨量 : </div><div class='ttpVal'> {y}</div><div class='ttpUnit'>(mm)</div></div>",
		dataPoints: [
			{ x: new Date(2020, 01, 01, 0,  0), y: 05 },
			{ x: new Date(2020, 01, 01, 0, 10), y: 05 },
			{ x: new Date(2020, 01, 01, 0, 20), y: 05...

CSS

.ttpTitle {
  float: left;
  line-height: 20px;
  width: 70px;
  
  /* border: solid 1px black; */
}

.ttpVal {
  float: left;
  display: block;
  width: 50px;
  text-align: right;
  line-height: 20px;
  
  /* border: solid 1px black; */
}

.ttpUnit {
  float: left;
  width: 50px;
  line-height: 20px;
  padding-left: 5px;

  /* border: solid 1px black; */
}

.outbox {
  height: 80px;
  text-align: left;
}