JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer">
  <div id = "ySlider" style="height: 360px; width: 2%; float: left; max-width: 15px; min-width: 10px"></div>
  <div id="chartContainer1" style="height: 360px; width: 95%;"></div>
</div>
<br/>
<div id = "xSlider" style="width: 95%; margin-left: 5px"></div>
<div id="tableContainer">
  <table id="chartData">
  </table>
</div>

CSS

.canvasjs-chart-toolbar> button:first-child {
  display: none !important;
}

#chartData{
  border: 1px solid black;
}
td{
  border: 1px solid black;
  width: 7%;
}

JavaScript

var selectedDataPoints = [];
var axisXMin = 0, axisXMax = 0;
var axisYMin = 0, axisYMax = 0;
var initialized = false;
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Select the Region to Highlight dataPoints"
  },
  zoomEnabled: true,
  zoomType: "xy",
  rangeChanged: changeSelectedDataPoints,
  data: [{
    type: "scatter",
    markerSize: 10,
    selectedMarkColor: "red", // Marker color by which selected dataPoints will be represented
    click: function(e) {
      e.chart.options.data[e.dataSeriesIndex].dataPoints[e.dataPointIndex].color = "red";
      e.chart.render();
    },
    dataPoints: dataGenerator(100),
  }]
});

chart1.render();

var canvas = document.querySelector('#chartContainer1');

canvas.addEventListener('click', function(event) {

  const canvasPoint = convertToCanvasCoordinates({
    x: event.pageX - canvas.offsetLeft,
    y: event.pageY - canvas.offsetTop
  });
  const closestPoint = findClosestPoint(canvasPoint);
  /*if (closestPoint) {
  	console.log(`closestPoint = ${JSON.stringify(closestPoint)}`);
    selectPoint(closestPoint);
  }*/
});

function convertToCanvasCoordinates(point) {
  return {
    x: chart1.axisX[0].convertPixelToValue(point.x),
    y: chart1.axisY[0].convertPixelToValue(point.y)
  };
}

function findClosestPoint(clickedPoint) {
  let smallestDistance = 999999;
  let closestPoint = null;
  const maxDistance = 100;
  const dataPoints = chart1.options.data[0].dataPoints;
  for (var i = 0; i < dataPoints.length; i++) {
    const point = dataPoints[i];
    const dx = clickedPoint.x - point.x;
    const dy = clickedPoint.y - point.y;
    const d = Math.pow(dx, 2) + Math.pow(dy, 2);
    if (d < smallestDistance && d < maxDistance) {
      smallestDistance = d;
      closestPoint = point;
    }
  }
  return closestPoint;
}

function selectPoint(point) {
  selectedDataPoints.push(point);
  point.markerColor = 'red';
}

//----- Function for indicating selected regions dataPoints marker size...