<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  
</head>
  
<div id="myDiv"></div>
<button id="hoverbutton" style="margin-left:80px;">Go!</button>
var myPlot = document.getElementById('myDiv'),
    hoverButton = document.getElementById('hoverbutton'),
    d3 = Plotly.d3,
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
        mode:'markers', marker:{size:16} },
        { x:x, y:y2, type:'scatter', name:'Trial 2',
        mode:'markers', marker:{size:16} } ];
    layout = { 
        hovermode:'closest',
        title:'Click "Go" button to trigger hover'
     };

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

myPlot.on('plotly_beforehover',function(){ 
    return false; 
});

hoverButton.addEventListener('click', function(){
    var curve1 = Math.floor(Math.random()*2),
        curve2 = Math.floor(Math.random()*2),
        point1 = Math.floor(Math.random()*14),
        point2 = Math.floor(Math.random()*14);
    Plotly.Fx.hover('myDiv',[
        {curveNumber:curve1, pointNumber:point1},
        {curveNumber:curve2, pointNumber:point2}
    ]);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.