JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<div id="AllBox" class="allbox">
  <!-- <div style="width:300px;text-align:center;margin-bottom:-5px">　Y</div> -->
  <dib id="chartContainer" style="width:400px;height:400px;" class="cont pos divSize"></dib>
</div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous">
</script>

CSS

body {
}
.allbox{
  margin:0;
  top:0px;
  left:0;
  width:100%;
  height:100%;
}

.cont {
  background-color:rgba(255,255,255,0.0);
  border:0px solid gray;
  border-radius:10px;
  position:absolute;
  margin:0;
  padding:0;
  display:block;
}

.pos {
  /* top:0px; */
  left:0px;
}

JavaScript

let chCount = 1;
let chart;
let chSize = 400;
let deg2Rad = Math.PI/180;
let rot = 0;
let ang = 30;
let arrL = 1;
const lineWId = 15;
let enlarge = 0.94;
let dX = 6 * 0.95; //destination point set to 95%
let sc = dX+5;

window.onload = function () {
	// スタイルシートの動的生成　チャートコンテナのサイズ指定
  //スタイル エレメントを作成
let style1 = document.createElement("style");
  //スタイルをヘッダに入れる
  document.head.appendChild(style1);
  //スタイルシートの定義
  style1.sheet.insertRule(".divSize{ width:" + chSize + "px;height:" + chSize + "px;}", 0 );
  $("#AllBox").append("<div id='chartContainer' class='cont pos divSize'>");
  let DatX = dX;
  let DatY = dX;	//1 + i * 0.8;

	let Points=[];
  let PlotData = calcArrowHeadPos(DatX,DatY,ang,arrL,false,true,3);

	Points.push({x:0, y:0,markerColor:"#4040FF",markerType:"circle",markerSize:lineWId,toolTipContent:"Point Zero"});
  Points.push({x:DatX, y:DatY, markerType:"none",markerColor:"yellow",markerSize:lineWId *0.6});
	Points.push({x: PlotData[1][2].x, y: PlotData[1][2].y,markerType: "none", toolTipContent: null});
  Points.push({x: PlotData[1][1].x, y: PlotData[1][1].y,markerType: "none", toolTipContent: null});
  Points.push({x: PlotData[1][0].x, y: PlotData[1][0].y,markerType: "none", toolTipContent: null});
  Points.push({x: PlotData[1][3].x, y: PlotData[1][3].y,markerType: "none", toolTipContent: null});
  Points.push({x: PlotData[1][2].x, y: PlotData[1][2].y,markerType: "none", toolTipContent: null});

  chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
    //backgroundColor: "rgba(220,220,220,1)",
    theme: "light",
    axisX:{
    	includeZero: true,
     	crosshair: {
	      enabled: true,
	      snapToDataPoint: false
	    },
      title:"X方向【min】",
	    lineThickness: 1,
      gridThickness: 1,
      gridDashType:"dot",
	    maximum:sc,
	    minimum:-sc,
	    labelFontSize: 12,
	    tickThickness: 1,
      interval:2,
      stripLines:[{
        color:"black",
        value:0,
/*         label:"Y",
        labelAlign:"far",
    ...