<head>
  <script src="https://cdn.plot.ly/plotly-2.33.0.min.js" charset="utf-8"></script>
</head>
<html>
  <body>
    <div id="myDiv"></div>
  </body>
</html>
var layer = document.getElementById('myDiv')
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  hoverinfo: "none",
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  hoverinfo: "none",
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  legend: {
    x: 0,
    y: 0,
    visible: false,
    traceorder: 'normal',
    font: {
      family: 'sans-serif',
      size: 12,
      color: '#000'
    },
    bgcolor: '#E2E2E2',
    bordercolor: '#FFFFFF',
    borderwidth: 2,
  }
};
Plotly.newPlot('myDiv', data, layout).then(() => {
  layer.on("plotly_hover", e => {
    var index = e.points[0].pointIndex
    
    layer.data.forEach((d, i) => {
          Plotly.update(layer, {name: `x: ${d.x[index]}, y: ${d.y[index]}`}, {}, i)
    })
    
    Plotly.update(layer, {}, {
      legend: {
        x: layer._fullLayout.xaxis.r2fraction(e.points[0].x),
        y: layer._fullLayout.yaxis.r2fraction(e.points[0].y),
        visible: true,
      }
    })
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.