JSFiddle - React, Tailwind, and code Playground

by Amarnath Shenoy

HTML

<canvas id="GraphPlate" width="600" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

var givenX=[0,10,20,30,50,60,70];
var givenY=[0,10,12,36,45,61,77];
DrawGraph(givenX,givenY,"#6600CC");
var X=[10,10,20,30,50,60,70];
var Y=[0,1.5,19,46,59,91,107];
DrawGraph(X,Y,"#FF0000");
drawCordinates();

function drawCordinates() {
    var canvas = document.getElementById("GraphPlate");
    var width = canvas.width;
    var height = canvas.height;
    var originX = 0;
    var originY = Number(height);
    var maxX = width;
    var maxY = 0;
    var scale = 25;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    //XY LINE
    ctx.moveTo(0, 0);
    ctx.lineWidth = 4;
    ctx.lineTo(0, originY);
    ctx.moveTo(originX, originY);
    ctx.lineTo(Number(width), Number(height));
    //Other cordinate lines
          ctx.strokeStyle = '#000000';
    ctx.stroke();
    //draw X coordinates    
    var yval = originY;
    ctx.lineWidth = 0.15;
    while (yval > 0) {
        ctx.moveTo(originX, yval);
        ctx.lineTo(width, yval);
        yval = yval - scale;
    }
    var xval = 0;
    while (xval < width) { //draw Y coordinates    
        ctx.moveTo(xval, originY);
        ctx.lineTo(xval, 0);
        xval = xval + scale;
    }
    ctx.stroke();
}
function DrawGraph(givenX,givenY,COLOR)
{
    var canvas = document.getElementById("GraphPlate");
    var width = canvas.width;
    var height = canvas.height;
    var originX = 0;
    var originY = Number(height);
    var maxX = width;
    var maxY = 0;
    var plotX=[];
    var plotY=[];
     var scale = 25;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.moveTo(originX,originY);
  
 for(var i =0;i<givenX.length;i++)
 { 
   plotX[i] = (givenX[i]*scale)/10;
   plotY[i] = originY-( givenY[i]*scale)/10;  
  
     ctx.lineTo(plotX[i],plotY[i]);
 ctx.moveTo(plotX[i],plotY[i]);
 }
      ctx.strokeStyle = COLOR;
      ctx.stroke();
    
}


$("#GraphPlate").mousemove(function(event){
        var canvas = document.getElementById("GraphPlate");
        var height =...