JSFiddle - React, Tailwind, and code Playground

by santy_naren

HTML

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/carbon-components.css">

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>


<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<p id="displayData"></p>

<p>

  <label>Size:
    <select id="size">
      <option>6pt</option>
      <option>7pt</option>
      <option>8pt</option>
      <option>9pt</option>
      <option>10pt</option>
      <option>12pt</option>
      <option selected>14pt</option>
      <option>18pt</option>
      <option>24pt</option>
      <option>30pt</option>
      <option>36pt</option>
      <option>48pt</option>
      <option>72pt</option>
    </select>
  </label>

  <label>Alignment:
    <select id="align">
      <option>left</option>
      <option selected>center</option>
      <option>right</option>
    </select>
  </label>

  <label>Padding:
    <input type="text" id="padding" size="3" value="10">
  </label>
</p>

CSS

body {
  background: #eee;
  margin: 2em;
  text-align: center;
}

.byline {
  font-style: italic;
  font-size: smaller;
}

JavaScript

var c = document.getElementById("chartContainer");

var chart;
var ctx;

var k = 0;
var tot = 0;
var xxx = true;

var size = document.getElementById('size');
var align = document.getElementById('align');
var padding = document.getElementById('padding');

chart = new CanvasJS.Chart("chartContainer", {

  theme: "light2",
  title: {
    text: "Draw Line on Chart based on Mouse Events"
  },
  data: [{
    type: "scatter",
    dataPoints: [{
        x: 10,
        y: 71
      },
      {
        x: 20,
        y: 55
      },
      {
        x: 30,
        y: 50
      },
      {
        x: 40,
        y: 65
      },
      {
        x: 50,
        y: 95
      },
      {
        x: 60,
        y: 68
      },
      {
        x: 70,
        y: 28
      },
      {
        x: 80,
        y: 34
      },
      {
        x: 90,
        y: 14
      }
    ]
  }]
});

chart.render();

// drawdefinedLine(chart,file.get("total"));

var p1 = {
  x: 0,
  y: 0
};
var p2 = {
  x: 0,
  y: 0
};

chart.textBaseline = 'bottom';
chart.lineWidth = 2;

var lineCoordinates = {};
var parentOffset = $(chart.container).offset();

jQuery(chart.container).on({

  mousedown: function(e) {

    p1.x = e.clientX - parentOffset.left;
    p1.y = e.clientY - parentOffset.top;
  },

  mouseup: function(e) {

    p2.x = e.clientX - parentOffset.left;
    p2.y = e.clientY - parentOffset.top;
    drawLine(chart, p1, p2);
  }
});

function drawLine(chart, p1, p2) {

  ctx = chart.ctx;
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.stroke();

  ctx.fillStyle = '#fff';
  ctx.beginPath();
  ctx.arc(p1.x, p1.y, 3, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(p2.x, p2.y, 3, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.stroke();

  ctx.fillStyle = '#666';

  var label = "α = " + (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI).toFixed(0) + "°";
  ctx.font = size.value + ' Arial';
  drawLabel(ctx, label, p1, p2, align.value, padding.value *...