<head>
	<script src='https://cdn.plot.ly/plotly-2.35.0.min.js'></script>
</head>
<body>
	<div id='myDiv'></div>
</body>
let layer = document.getElementById('myDiv')
let x = [1, 2, 3, 4, 5, 6]
let y = [1, 2, 3, 2, 3, 4]
let y2 = [1, 4, 7, 6, 1, 5]
let colors = ['blue','red']
let data = [{
  x,
  y,
  type: 'scattergl',
  mode: 'line',
  line: {
    color: colors[0]
  },
  marker: {
    size: 16,
    color: colors[0]
  }
},{
  x,
  y: y2,
  type: 'scattergl',
  mode: 'line',
  line: {
    color: colors[1]
  },
  marker: {
    size: 16,
    color: colors[1]
  }
}]
let layout = {
  hovermode: 'x unified',
  hoverdistance: 100
}
let config = {
  responsive: true
}

Plotly.newPlot(layer, data, layout, config)

layer
  .on('plotly_click', data => {
    const y = data.event.offsetY - layer._fullLayout.margin.t

    for(let i = 0; i < data.points.length; i++) {
      const yPoint = data.points[i].yaxis.c2p(data.points[i].y)
      const dist = Math.abs(y - yPoint)

      if(dist < 10) {
        const text = '<b>x</b> = '+data.points[i].x +
              '<br><b>y</b> = '+data.points[i].y

        Plotly.relayout(layer, {
          'annotations[0]': {
            text,
            xref: data.points[i].data.xaxis,
            yref: data.points[i].data.yaxis,
            x: data.points[i].x,
            y: data.points[i].y,
            bgcolor: colors[data.points[i].curveNumber],
            font: {
              color: "white"
            }
          }
        })

        break
      }
    }
  })
  .on('plotly_legendclick', data => {
    Plotly.relayout(layer, { annotations: null })
    return 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.