'plotly_hover' not working after replotting new data in same div with Plotly.newPlot

plotly.js
1

My hover over info box works fine until I replot data after updating the data array with

Plotly.newPlot(‘graph’, data, layout, {displayModeBar: false});

my code outline:

var data = [data1, data2, data3, data4];
var hoverInfo = document.getElementById(‘hoverinfo’);
var myPlot = document.getElementById(‘graph’);
Plotly.newPlot(‘graph’, data, layout, {displayModeBar: false});

myPlot.on(‘plotly_hover’, function(data){
…my hover stuff…
});

I can’t find a way of using Plotly.restyle to update the entire data array.
I tried this which looks like it should work. It changes things but breaks the graph completely.

        Plotly.restyle('graph', data1, [0]);
        Plotly.restyle('graph', data2, [1]);
        Plotly.restyle('graph', data3, [2]);
        Plotly.restyle('graph', data4, [3]);
2

It would remove the event listner if you create the new plot, its the expected behavior. You have to attach the event listener again.

To restyle multiple data trace do this, if its a simple 2d scatter plot and
data1 = {x:[1,2,3], y: [4,5,6]} and data2 = {x:[3,4,5], y:[9,2,1]}

Plotly.restyle(graph,{ x :[[1,2,3],[3,4,5]], y:[[4,6,8],[9,2,1]]})