JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<center><h3>Move Mouse Over any Chart</h3></center>
<div id="chartContainer1" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer2" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer3" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer4" style="width: 49%; height: 275px;display: inline-block;"></div>

JavaScript

var charts = [],
    toolTip = {
      updated: showTooltip,
      hidden: hideTooltip
    };
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Chart 1"
  },
  toolTip: toolTip,
  data: [{        
    type: "column",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { /* x: 30, y: 50 */ },
      { x: 40, y: 65 },
      { /* x: 50, y: 95 */ },
      { x: 60, y: 68 },
      { /* x: 70, y: 28 */ },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart1.render();
charts.push(chart1);

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Chart 2"
  },
  toolTip: toolTip,
  data: [{        
    type: "line",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart2.render();
charts.push(chart2);

var chart3 = new CanvasJS.Chart("chartContainer3", {
  title: {
    text: "Chart 3"
  },
  toolTip: toolTip,
  data: [{        
    type: "bar",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart3.render();
charts.push(chart3);

var chart4 = new CanvasJS.Chart("chartContainer4", {
  title: {
    text: "Chart 4"
  },
  toolTip: toolTip,
  data: [{        
    type: "area",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart4.render();
charts.push(chart4);

function getNearestXValues(xVal, dps1) {
	
	return [].concat(dps1).sort(function(a, b) {
    var diffA = Math.abs(xVal - a.x);
    var diffB =...