<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-2.8.3.min.js"></script>
</head>

<body>
  
  <div id="myDiv" style="width: 480px; height: 400px;"></div>
</body>
var trace1 = {
  x: [0.4, 1.4, 2.4],
  y: [10, 11, 12],
  type: 'scatter'
};

var trace2 = {
  x: [2.2, 3.2, 4.2],
  y: [100, 110, 120],
  yaxis: 'y2',
  type: 'scatter'
};

var trace3 = {
  x: [3.1, 4.1, 5.1],
  y: [1000, 1100, 1200],
  yaxis: 'y3',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

var layout = {
  xaxis: {
    showspikes: true,
    spikemode: 'across',
    spikesnap: 'cursor',
  },
  yaxis: {
    domain: [0, 0.33],
    showspikes: true,
    spikemode: 'across',
    spikesnap: 'cursor',
  },
  legend: {traceorder: 'reversed'},
  yaxis2: {
    domain: [0.33, 0.66],
    showspikes: true,
    spikemode: 'across',
    spikesnap: 'cursor',
  },
  yaxis3: {
    domain: [0.66, 1],
    showspikes: true,
    spikemode: 'across',
    spikesnap: 'cursor',
  },
  hovermode: 'x',
  //hovermode: 'closest' <-- only display on 1 subgraph
};

Plotly.newPlot('myDiv', data, layout);

var myPlot = document.getElementById('myDiv')

myPlot.on('plotly_hover', function (eventdata){
  var xVal = eventdata.xvals[0];
  Plotly.Fx.hover(myPlot, {xval: xVal}, ['xy','xy2','xy3']);
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.