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 chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Select the Region to Highlight dataPoints"
  },
  zoomEnabled: true,
  zoomType: "xy",
  rangeChanged: changeSelectedDataPoints,
  data: [{
    type: "scatter",
    markerSize: 10,
    markerBorderThickness: 3,
    selectedMarkerBorderColor: "black", // Marker color by which selected dataPoints will be represented
    dataPoints: dataGenerator(100),
  }]
});

document.querySelector('#chartContainer').addEventListener('click', function(e) {
	var clickPoint = {
  	x: e.pageX - this.offsetLeft, 
		y: e.pageY - this.offsetTop
  };
  var bounds = chart1.bounds;
  
  var dataPoints = chart1.options.data[0].dataPoints;
  for (var i = 0; i < dataPoints.length; i++) {

  }
});

chart1.render();


//----- Function for indicating selected regions dataPoints marker size --------
function changeSelectedDataPoints(e) {
  var data = e.chart.options.data;
  if (!e.chart.options.axisX)
    e.chart.options.axisX = {};

  if (!e.chart.options.axisY)
    e.chart.options.axisY = {};

  var axisX = e.axisX[0];
  var axisY = e.axisY[0];
  
  selectedDataPoints = [];

  for (var i = 0; i < data.length; i++) {
    var dataPoints = data[i].dataPoints;
    var selectedMarkerBorderColor = data[i].selectedMarkerBorderColor;
    for (var j = 0; j < dataPoints.length; j++) {
      if (dataPoints[j].x > axisX.viewportMinimum && dataPoints[j].x < axisX.viewportMaximum && dataPoints[j].y > axisY.viewportMinimum && dataPoints[j].y < axisY.viewportMaximum) {
      	selectedDataPoints.push({x: dataPoints[j].x, y: dataPoints[j].y})
        if (typeof dataPoints[j].originalMarkerSize === "undefined") {
          dataPoints[j].selectedMarkerBorderColor = dataPoints[j].markerSize ? dataPoints[j].markerBorderColor : "black";
        }
        dataPoints[j].markerBorderColor = selectedMarkerBorderColor;
      } else
       ...