JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

JavaScript

//PLOT SIMPLE LINE GRAPH
	var trace1 =
	{
	  x: [1, 2, 3],
	  y: [40, 50, 60],
	  name: 'data1',
	  type: 'scatter',
	  hoverinfo: 'none'
	};
	var trace2 =
	{
	  x: [2, 3, 4],
	  y: [4, 5, 6],
	  name: 'data2',
	  type: 'scatter',
	  hoverinfo: 'none'
	};
	data=[trace1,trace2];
	var layout ={
		//hovermode: false//closest, false
	}
	Plotly.newPlot("myDiv",data,layout);

	myDiagramElement = document.getElementById("myDiv");
	myDiagramElement.on('plotly_unhover', function(data){
		//hide single markers of lines
		console.log("UNHOVER");
    data.points.forEach(function(p) {
			console.log("HIDE MARKER FOR P");
	  });
	});
	myDiagramElement.on('plotly_hover', function(data){
		//show single markers: one each for existing trace on that x-value
		console.log("HOVER");
	  data.points.forEach(function(p) {
			console.log("SHOW MARKER FOR P");
	  });
	});