Description
Scenario: I have a plot with two y axis overlayed where trace data is loaded asynchronously so there is no guarantee of order. When a trace that belongs to the y axis overlaying the main y axis is loaded first, the plot generate 2 set o graphic elements on SVG representing the trace: the first as a subplot and the second as an overplot of the mainplot.
Here is a live example: https://codepen.io/vinipitta/pen/WMGdbx
(Just drag the defective trace (trace 1) to see the duplicated trace remain still while a copy moves on the right y axis.)
Looks like since there is no trace loaded in the main y axis, the plotinfo.mainplot is undefined when the trace is added to the overlayed axis generating a subplot. When a trace is added to the mainplot, the overplot group is populated with the previous trace and the former subplot ins't removed.
function makeSubplotLayer(plotinfo) {
var plotgroup = plotinfo.plotgroup;
var id = plotinfo.id;
var xLayer = constants.layerValue2layerClass[plotinfo.xaxis.layer];
var yLayer = constants.layerValue2layerClass[plotinfo.yaxis.layer];
if(!plotinfo.mainplot) {
The simplest workaround is to set the layout.yaxis.overlaying or layout.yaxis2.overlaying based on where the first loaded trace belongs to.
This issue seems related to: #2227