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;

  var pr_AxisY2=[];

	pr_AxisY2.push({title:"10分雨量（mm）/ 時間雨量（mm/h）",
	lineColor:"#7F6084",
	tickColor:"#7F6084",
	includeZero:true,
	minimum:0,
	maximum:50,
	titleFontSize:12});
  
  pr_AxisY2.push({
  title:"累加雨量（mm）",
	lineColor:"#369EAD",
	tickColor:"#369EAD",
	includeZero:true,
	minimum:0,
	maximum:200,
	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 },
			{ x: new Date(2020, 01, 01, 0, 30), y: 05 },
			{ x: new Date(2020, 01, 01, 0, 40), y: 05 },
			{ x: new Date(2020, 01, 01, 0, 50), y: 05 },
			{ x: new Date(2020, 01, 01, 1,  0), y: 06 },
			{ x: new Date(2020, 01, 01, 1, 10), y: 06 },
			{...

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;
}