diff --git a/src/plots/cartesian/index.js b/src/plots/cartesian/index.js index 3540c58d901..0fc2e44e847 100644 --- a/src/plots/cartesian/index.js +++ b/src/plots/cartesian/index.js @@ -557,6 +557,7 @@ function makeSubplotData(gd) { } function makeSubplotLayer(gd, plotinfo) { + var fullLayout = gd._fullLayout; var plotgroup = plotinfo.plotgroup; var id = plotinfo.id; @@ -565,9 +566,9 @@ function makeSubplotLayer(gd, plotinfo) { var xLayer = constants.layerValue2layerClass[plotinfo.xaxis.layer]; var yLayer = constants.layerValue2layerClass[plotinfo.yaxis.layer]; - var hasOnlyLargeSploms = gd._fullLayout._hasOnlyLargeSploms; + var hasOnlyLargeSploms = fullLayout._hasOnlyLargeSploms; - if(!plotinfo.mainplot) { + if(!plotinfo.mainplot || fullLayout._zindices.length > 1) { if(hasOnlyLargeSploms) { // TODO could do even better // - we don't need plot (but we would have to mock it in lsInner diff --git a/test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot.png b/test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot.png new file mode 100644 index 00000000000..68249819764 Binary files /dev/null and b/test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot.png differ diff --git a/test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot2.png b/test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot2.png new file mode 100644 index 00000000000..0edf70feee3 Binary files /dev/null and b/test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot2.png differ diff --git a/test/image/baselines/zorder-overlayed-subplots-multiple-traces-one-subplot.png b/test/image/baselines/zorder-overlayed-subplots-multiple-traces-one-subplot.png new file mode 100644 index 00000000000..b9c67e0578f Binary files /dev/null and b/test/image/baselines/zorder-overlayed-subplots-multiple-traces-one-subplot.png differ diff --git a/test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot.json b/test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot.json new file mode 100644 index 00000000000..e07ed4483af --- /dev/null +++ b/test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot.json @@ -0,0 +1,62 @@ +{ + "data": [ + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [1, 2, 3, 4], + "zorder": 1 + }, + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [2, 3, 4, 1], + "zorder": 2 + }, + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [3, 4, 1, 2], + "xaxis": "x2", + "zorder": 3 + }, + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [4, 1, 2, 3], + "xaxis": "x2", + "yaxis": "y2", + "zorder": 4 + } + ], + "layout": { + "showlegend": true, + "title": { + "text": "zorder overlayed subplots - multiple on the same subplot", + "subtitle": { + "text": "Orange trace is displayed on top!" + } + }, + "width": 600, + "height": 400, + "xaxis2": { + "overlaying": "x", + "side": "top" + }, + "yaxis2": { + "overlaying": "y", + "side": "right" + } + } +} diff --git a/test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot2.json b/test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot2.json new file mode 100644 index 00000000000..de9649a36df --- /dev/null +++ b/test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot2.json @@ -0,0 +1,62 @@ +{ + "data": [ + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [1, 2, 3, 4], + "zorder": 4 + }, + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [2, 3, 4, 1], + "zorder": 3 + }, + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [3, 4, 1, 2], + "xaxis": "x2", + "zorder": 2 + }, + { + "line": { + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [4, 1, 2, 3], + "xaxis": "x2", + "yaxis": "y2", + "zorder": 1 + } + ], + "layout": { + "showlegend": true, + "title": { + "text": "zorder overlayed subplots - multiple on the same subplot", + "subtitle": { + "text": "Orange trace is displayed on top!" + } + }, + "width": 600, + "height": 400, + "xaxis2": { + "overlaying": "x", + "side": "top" + }, + "yaxis2": { + "overlaying": "y", + "side": "right" + } + } +} diff --git a/test/image/mocks/zorder-overlayed-subplots-multiple-traces-one-subplot.json b/test/image/mocks/zorder-overlayed-subplots-multiple-traces-one-subplot.json new file mode 100644 index 00000000000..eb80549c71e --- /dev/null +++ b/test/image/mocks/zorder-overlayed-subplots-multiple-traces-one-subplot.json @@ -0,0 +1,111 @@ +{ + "data": [ + { + "line": { + "color": "blue", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [1, 2, 3, 4], + "zorder": 8 + }, + { + "line": { + "color": "darkblue", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [1.2, 2.2, 3.2, 4.2], + "zorder": 7 + }, + { + "line": { + "color": "orange", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [2, 3, 4, 1], + "yaxis": "y2", + "zorder": 6 + }, + { + "line": { + "color": "darkorange", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [2.2, 3.2, 4.2, 1.2], + "yaxis": "y2", + "zorder": 5 + }, + { + "line": { + "color": "green", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [3, 4, 1, 2], + "xaxis": "x2", + "zorder": 4 + }, + { + "line": { + "color": "darkgreen", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [3.2, 4.2, 1.2, 2.2], + "xaxis": "x2", + "zorder": 3 + }, + { + "line": { + "color": "red", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [4, 1, 2, 3], + "xaxis": "x2", + "yaxis": "y2", + "zorder": 2 + }, + { + "line": { + "color": "darkred", + "width": 15 + }, + "mode": "lines", + "x": ["A", "B", "C", "D"], + "y": [4.2, 1.2, 2.2, 3.2], + "xaxis": "x2", + "yaxis": "y2", + "zorder": 1 + } + ], + "layout": { + "showlegend": true, + "title": { + "text": "zorder overlayed subplots", + "subtitle": { + "text": "case of multiple traces in one subplot" + } + }, + "width": 600, + "height": 400, + "xaxis2": { + "overlaying": "x", + "side": "top" + }, + "yaxis2": { + "overlaying": "y", + "side": "right" + } + } +}