JSFiddle - React, Tailwind, and code Playground

HTML

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plotly_ph"></div>
<div id="x_value"></div>
<div id="points_details"></div>

CSS

#x_value {
  text-align: center;
  font-size: 60px;
  border-bottom: 1px solid black;
}
#points_details {
  text-align: center;
}

JavaScript

let App = function() {
	this.plotlyPhId = 'plotly_ph';
  let trace1 = {
    x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
    y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
    type: 'scatter'
  };
  let trace2 = {
    x: [0, 1.5, 2, 3.5, 4, 5.5, 6, 7.5, 8.5],
    y: [0, 4, 5, 1, 2, 2, 3, 4, 2],
    type: 'scatter'
  };
  this.data = [trace1, trace2];
  this.layout = {
    annotations: []
  };
};
App.prototype.InitialDraw = function() {
	this.whenLoadedPh = Plotly.newPlot(this.plotlyPhId, this.data, this.layout);
}
App.prototype.AttachHoverListener = function() {
	this.whenLoadedPh.then(placeholder => {
  	const xElement = document.getElementById('x_value');
  	const pointsElement = document.getElementById('points_details');
    placeholder.on('plotly_hover', (ed) => {
      console.log(ed.points);
      xElement.innerHTML = ed.points.length;
      pointsElement.innerHTML = ed.points.map(p => `x: ${p.x}, y: ${p.y}`).join('<br>');
    })
  })
}
App.prototype.redraw = function() {
	Plotly.relayout(this.plotlyPhId, this.layout);
}
 
const app = new App();
app.InitialDraw();
app.AttachHoverListener();