Plotly.addTraces Duplicating Plots With Multiple Axes

[greatchickenmaster]

Issue

This post is a detailed post of the error I mentioned here (the other post asks a question, having two topics in the same post could be confusing).

Specifically, this is my issue:

@greatchickenmaster

I’m attempting to overlay N plots dynamically and an error appears where the same plot is overlayed twice but shifted. I’m attempting to get a working CodePen of the issue. I’ve tracked the issue down to having multiple Plotly axes.

Examples of Issue

I’ve created three CodePen’s to illustrate the problem:

CodePen 1: Here we add 1 trace to a Plotly Plot. There are two issues that I can see:

1. Although {yaxis3:{visible:false}}the axes are still being displayed
2. If you click ‘New Trace’ in the legend ‘New Trace’ is still visible. It may be that ‘New Trace’ is being duplicated.

CodePen 2: This CodePen is built on top of the first, and so the previous 2 problems still exist (but to a greater degree since there are more traces), but now we have another:

1. The trace named ‘Hard Coded Trace’ has now been duplicated and possibly shifted (see next CodePen).

CodePen 3: As before, this CodePen has been built on top the previous CodePens and so the earlier problems still persist. To experiment with the possibility that the plot has been both duplicated and shifted we add the following bit of code xaxis: { visible: false, rangemode: "nonnegative", }, to the newLayout.
The new problem:

1. The plots have definitely been duplicated and have shifted and/or rotated

Summary of Issues:

The following problems appear throughout the course of these CodePens:

1. Plots are duplicated
2. Duplicated plots are not included in the legend
   2.1 This becomes evident when clicking each item in the legend (to hide the trace)
3. When xaxis: { visible: false, rangemode: "nonnegative", }, is added to the layout for the appended traces, the duplicated plots shift and/or rotate.
4. Axes are displayed even though they are have been hidden: visible: false

Question

1. How can the plots stop from being duplicated and later shifted and/or rotated?
2. How can the axes be hidden?

Notes:

The code was based on these two examples in the docs: Plotly.addTraces, Multiple Y-Axes.

I’ve tried to be as specific as possible to illustrate the problem. If it still doesn’t make sense please ask for clarification!!!

[etienne]

Before we look at this in detail, it might be nice to clarify what you mean by hidden.

For example,

• are expecting all the axis ticks, labels and grid line to not be drawn?
• Or a you expecting that plus all traces associated with that axis to not be drawn also?

[etienne]

Moreover, I think most of your issues could be resolved by making sure you’re inputting new attribute objects to addTraces and relayout instead of first mutating your the data/layout passed to newPlot and then calling addTraces and relayout like in your codePen 2 and 3. Please note that plotly.js (unfortunately) mutates a few things in the input attribute containers. What you send to newPlot will have a few extra keys after newPlot (see https://github.com/plotly/plotly.js/issues/1231 for an example).

[greatchickenmaster]

In response to your first post, I’m expecting all axis ticks, labels and grid line not to be drawn.

@etienne

Before we look at this in detail, it might be nice to clarify what you mean by hidden.

For example,

• are expecting all the axis ticks, labels and grid line to not be drawn?
• Or a you expecting that plus all traces associated with that axis to not be drawn also?

In response to your second post:

@etienne

Moreover, I think most of your issues could be resolved by making sure you’re inputting new attribute objects to addTraces and relayout instead of first mutating your the data/layout passed to newPlot and then calling addTraces and relayout like in your codePen 2 and 3. Please note that plotly.js (unfortunately) mutates a few things in the input attribute containers. What you send to newPlot will have a few extra keys after newPlot (see `newPlot` does not clear histogram axis type!!! · Issue #1231 · plotly/plotly.js · GitHub for an example).

I don't understand what you mean by

@etienne

inputting new attribute objects to addTraces and relayout instead of first mutating your the data/layout passed to newPlot and then calling addTraces and relayout

Do you mean something like [this](https://codepen.io/thegreatandawesomechickenmaster/pen/yjOWjG)?

After looking at the [Github Issue](https://github.com/plotly/plotly.js/issues/1231), I noticed that the workaround you wrote calls newPlot twice (with an empty layout object). Could you explain why calling newPlot twice would work better than `relayout`?

I have noticed that if I delete the traces and replot using the same code that the duplicated traces disappear (but when I call graphDiv.data when the duplicates are shown the duplicates do not appear in the data).

[greatchickenmaster]

After a few experiments (and studying the CodePen linked in the GitHub issue), I decided to add another newPlot call at the end of everything. This CodePen resolved all of the issues.


It would be a big help if you could explain why it works. What about calling newPlot again doesn’t destroy the previous plot (like the docs say it does) and fixes these errors?