JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<span id="profitloss"></span>

JavaScript

var dataPoints = [{x: 0, y : 71}, {x: 1, y : 84}, {x: 2, y : 91}, {x: 3, y : 79}, {x: 4, y : 95}, {x: 5, y : 68}, {x: 6, y : 98}], purchasedAt = 0, soldAt = 0;

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Live Data"
  },
  axisX: {
  	viewportMinimum: null
  },
  data: [{
    type: "line",
    dataPoints: dataPoints
  }]
});

updateData();

// Initial Values
var yVal = 100,
xVal = 7;
function updateData(data) {
  yVal = yVal +  Math.round(10 + Math.random() *(-10-10));
  dataPoints.push({x: xVal++, y: yVal});
  
  if(dataPoints.length>100){
  	dataPoints.shift();
  }
  	
  chart.render();
  

  setTimeout(updateData, 100);
}

$("#chartContainer").last().on("mousedown", function(e) {
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  
  var xVal = Math.round(chart.axisX[0].convertPixelToValue(relX)) >= 0 ? Math.round(chart.axisX[0].convertPixelToValue(relX)) : 0;
  
	purchasedAt = xVal;
});

$("#chartContainer").last().on("mouseup", function(e) {
  var parentOffset = $(this).parent().offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  
  var xVal = Math.round(chart.axisX[0].convertPixelToValue(relX));
	soldAt = xVal;

  $("#profitloss").text("Profit/Loss: " + (dataPoints[soldAt].y - dataPoints[purchasedAt].y))
});