<!doctype html><html><head><metaname="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"><title>plot.redraw multiple axes</title><scriptsrc="plotly-1.20.4.min.js"></script></head><body><divid="myDiv1"></div><divid="myDiv2"></div><script>vartrace1={x: [1,2,3],y: [40,50,60],name: "yaxis data",type: "scatter"};vartrace2={x: [2,3,4],y: [4,5,6],name: "yaxis2 data",yaxis: "y2",type: "scatter"};varlayout1={title: "Remove yaxis, use redraw()",yaxis: {title: "yaxis title"},yaxis2: {title: "yaxis2 title",titlefont: {color: "rgb(148, 103, 189)"},tickfont: {color: "rgb(148, 103, 189)"},overlaying: "y",side: "right"}};vardata=[trace1,trace2];Plotly.newPlot("myDiv1",data,layout1);Plotly.newPlot("myDiv2",data,layout1);setTimeout(function(){deletelayout1.yaxis2;deletetrace2.yaxis;varplot=document.querySelector("#myDiv1");// plot.layout = layout1;// redraw appears to not clean out the old dataPlotly.redraw("myDiv1");varlayout2={title: "Using Plotly#newPlot seems to work",yaxis: {title: "yaxis title"}};// this works as expectedPlotly.newPlot("myDiv2",data,layout2);},2*1000);</script></body></html>
I have the following, simple code (also see attached zip for standalone:
What I get is the following:
As you can see, the upper plot is being updated with
Plotly#redrawwhile the lower plot is updated usingPlotly#newPlot.I would expect those two invocations to produce the same result. However, in the one using
Plotly#redraw, it appears as thought the previous 2nd y-axis and the associated trace is not cleaned up properly. You can also see that when the mouse is hovered over the trace, the 'old' trace is not (correctly so) taken into account, i.e. no hover-text appears over the 'old' trace.I have verified this behaviour on a Mac OS 10.10.5 and the following browsers:
plotly-multiple-axes.html.zip