Black Lives Matter. Please consider donating to Black Girls Code today.
Learn about the upcoming Dash Enterprise 4.0 release in the August 5th webinar with Chris Parmer, the Inventor of Dash.

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

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]);

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]]})