JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>  

<script type="text/javascript"> 
window.onload = function () {  

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

	theme: "light2",
	title:{
		text: "Simple Line Chart"
	},
	axisX: [{
        stripLines: [{
          	value: 2,
          	color: "#d8d8d8",
            label: "Start",
            labelFontColor: "#a8a8a8",
            showOnTop: 'true'
        }, {
          	value: 7,
          	color: "#d8d8d8",
            label: "Stop",
            labelFontColor: "#a8a8a8",
            showOnTop: 'true'
        }]
          }],
	axisY: [{
        stripLines: [{
          	startValue: 400,
			endValue: 550,
            color: "yellow"
        }]
    }],
	data: [{        
		type: "line",   
		dataPoints: [
			{ y: 450 },
			{ y: 414},
			{ y: 520,},
			{ y: 460 },
			{ y: 450 },
			{ y: 500 },
			{ y: 480 },
			{ y: 480 },
			{ y: 410 },
			{ y: 500 },
			{ y: 480 },
			{ y: 510 }
		]
	}]
});


chart.render();


$(".canvasjs-chart-canvas").last().on("mousedown", function(e) {
		// Get the selected stripLine & change the cursor
    var parentOffset = $(this).parent().offset();
	var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    var snapDistance = 5;
    
  	for(var i = 0; i < chart.options.axisX[0].stripLines.length; i++) {
    	if(relY > chart.axisX[0].stripLines[i].get("bounds").y1 && relY < chart.axisX[0].stripLines[i].get("bounds").y2 && relX > chart.axisX[0].stripLines[i].get("bounds").x1 - snapDistance && relX < chart.axisX[0].stripLines[i].get("bounds").x2 + snapDistance) {
          
          selected = i;
        $(this).css("cursor","pointer");
        
    	}
  	}
});

$(".canvasjs-chart-canvas").last().on("mousemove", function(e) {
// Move the selected stripLine
    if(selected !== -1) {
    	var parentOffset = $(this).parent().offset();
			var relX = e.pageX - parentOffset.top;
      var relY =...