<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',
    bgcolor: '#E2E2E2',
    bordercolor: '#FFFFFF',
    borderwidth: 2,
    font: {
      family: 'sans-serif',
      size: 12,
      color: '#000'
    }
  }
};
var config = {
  responsive: true
}

Plotly.newPlot(layer, data, layout, config).then(_ => {
  layer
    .on("plotly_hover", e => {
      var index = e.points[0].pointIndex
    
      layer.data.forEach((d, i) => {
            Plotly.restyle(layer, {
              name: `x: ${d.x[index]}, y: ${d.y[index]}`
            }, i)
      })
    
      Plotly.relayout(layer, {
        legend: {
          x: layer._fullLayout.xaxis.r2fraction(e.points[0].x),
          y: layer._fullLayout.yaxis.r2fraction(e.points[0].y)
        }
      })
    })
    .on("plotly_unhover", e => {
      Plotly.relayout(layer, {
        legend: {
          visible: false
        }
      })
    })
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.