Skip to content

Commit b0497ab

Browse files
archmojarchmoj
authored
Merge pull request #7141 from plotly/fix7070-zorder
Fix `zorder` on overlayed subplots case of multiple traces in each subplot
2 parents ce07feb + 0c9941a commit b0497ab

7 files changed

+238
-2
lines changed

‎src/plots/cartesian/index.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,7 @@ function makeSubplotData(gd) {
557557
}
558558

559559
function makeSubplotLayer(gd, plotinfo) {
560+
var fullLayout = gd._fullLayout;
560561
var plotgroup = plotinfo.plotgroup;
561562
var id = plotinfo.id;
562563

@@ -565,9 +566,9 @@ function makeSubplotLayer(gd, plotinfo) {
565566

566567
var xLayer = constants.layerValue2layerClass[plotinfo.xaxis.layer];
567568
var yLayer = constants.layerValue2layerClass[plotinfo.yaxis.layer];
568-
var hasOnlyLargeSploms = gd._fullLayout._hasOnlyLargeSploms;
569+
var hasOnlyLargeSploms = fullLayout._hasOnlyLargeSploms;
569570

570-
if(!plotinfo.mainplot) {
571+
if(!plotinfo.mainplot || fullLayout._zindices.length > 1) {
571572
if(hasOnlyLargeSploms) {
572573
// TODO could do even better
573574
// - we don't need plot (but we would have to mock it in lsInner

‎test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot.png

41.1 KB
Loading

‎test/image/baselines/zorder-overlayed-subplots-multiple-traces-main-subplot2.png

40.6 KB
Loading

‎test/image/baselines/zorder-overlayed-subplots-multiple-traces-one-subplot.png

48 KB
Loading

‎test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot.json

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"data": [
3+
{
4+
"line": {
5+
"width": 15
6+
},
7+
"mode": "lines",
8+
"x": ["A", "B", "C", "D"],
9+
"y": [1, 2, 3, 4],
10+
"zorder": 1
11+
},
12+
{
13+
"line": {
14+
"width": 15
15+
},
16+
"mode": "lines",
17+
"x": ["A", "B", "C", "D"],
18+
"y": [2, 3, 4, 1],
19+
"zorder": 2
20+
},
21+
{
22+
"line": {
23+
"width": 15
24+
},
25+
"mode": "lines",
26+
"x": ["A", "B", "C", "D"],
27+
"y": [3, 4, 1, 2],
28+
"xaxis": "x2",
29+
"zorder": 3
30+
},
31+
{
32+
"line": {
33+
"width": 15
34+
},
35+
"mode": "lines",
36+
"x": ["A", "B", "C", "D"],
37+
"y": [4, 1, 2, 3],
38+
"xaxis": "x2",
39+
"yaxis": "y2",
40+
"zorder": 4
41+
}
42+
],
43+
"layout": {
44+
"showlegend": true,
45+
"title": {
46+
"text": "zorder overlayed subplots - multiple on the same subplot",
47+
"subtitle": {
48+
"text": "Orange trace is displayed on top!"
49+
}
50+
},
51+
"width": 600,
52+
"height": 400,
53+
"xaxis2": {
54+
"overlaying": "x",
55+
"side": "top"
56+
},
57+
"yaxis2": {
58+
"overlaying": "y",
59+
"side": "right"
60+
}
61+
}
62+
}

‎test/image/mocks/zorder-overlayed-subplots-multiple-traces-main-subplot2.json

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"data": [
3+
{
4+
"line": {
5+
"width": 15
6+
},
7+
"mode": "lines",
8+
"x": ["A", "B", "C", "D"],
9+
"y": [1, 2, 3, 4],
10+
"zorder": 4
11+
},
12+
{
13+
"line": {
14+
"width": 15
15+
},
16+
"mode": "lines",
17+
"x": ["A", "B", "C", "D"],
18+
"y": [2, 3, 4, 1],
19+
"zorder": 3
20+
},
21+
{
22+
"line": {
23+
"width": 15
24+
},
25+
"mode": "lines",
26+
"x": ["A", "B", "C", "D"],
27+
"y": [3, 4, 1, 2],
28+
"xaxis": "x2",
29+
"zorder": 2
30+
},
31+
{
32+
"line": {
33+
"width": 15
34+
},
35+
"mode": "lines",
36+
"x": ["A", "B", "C", "D"],
37+
"y": [4, 1, 2, 3],
38+
"xaxis": "x2",
39+
"yaxis": "y2",
40+
"zorder": 1
41+
}
42+
],
43+
"layout": {
44+
"showlegend": true,
45+
"title": {
46+
"text": "zorder overlayed subplots - multiple on the same subplot",
47+
"subtitle": {
48+
"text": "Orange trace is displayed on top!"
49+
}
50+
},
51+
"width": 600,
52+
"height": 400,
53+
"xaxis2": {
54+
"overlaying": "x",
55+
"side": "top"
56+
},
57+
"yaxis2": {
58+
"overlaying": "y",
59+
"side": "right"
60+
}
61+
}
62+
}

‎test/image/mocks/zorder-overlayed-subplots-multiple-traces-one-subplot.json

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
{
2+
"data": [
3+
{
4+
"line": {
5+
"color": "blue",
6+
"width": 15
7+
},
8+
"mode": "lines",
9+
"x": ["A", "B", "C", "D"],
10+
"y": [1, 2, 3, 4],
11+
"zorder": 8
12+
},
13+
{
14+
"line": {
15+
"color": "darkblue",
16+
"width": 15
17+
},
18+
"mode": "lines",
19+
"x": ["A", "B", "C", "D"],
20+
"y": [1.2, 2.2, 3.2, 4.2],
21+
"zorder": 7
22+
},
23+
{
24+
"line": {
25+
"color": "orange",
26+
"width": 15
27+
},
28+
"mode": "lines",
29+
"x": ["A", "B", "C", "D"],
30+
"y": [2, 3, 4, 1],
31+
"yaxis": "y2",
32+
"zorder": 6
33+
},
34+
{
35+
"line": {
36+
"color": "darkorange",
37+
"width": 15
38+
},
39+
"mode": "lines",
40+
"x": ["A", "B", "C", "D"],
41+
"y": [2.2, 3.2, 4.2, 1.2],
42+
"yaxis": "y2",
43+
"zorder": 5
44+
},
45+
{
46+
"line": {
47+
"color": "green",
48+
"width": 15
49+
},
50+
"mode": "lines",
51+
"x": ["A", "B", "C", "D"],
52+
"y": [3, 4, 1, 2],
53+
"xaxis": "x2",
54+
"zorder": 4
55+
},
56+
{
57+
"line": {
58+
"color": "darkgreen",
59+
"width": 15
60+
},
61+
"mode": "lines",
62+
"x": ["A", "B", "C", "D"],
63+
"y": [3.2, 4.2, 1.2, 2.2],
64+
"xaxis": "x2",
65+
"zorder": 3
66+
},
67+
{
68+
"line": {
69+
"color": "red",
70+
"width": 15
71+
},
72+
"mode": "lines",
73+
"x": ["A", "B", "C", "D"],
74+
"y": [4, 1, 2, 3],
75+
"xaxis": "x2",
76+
"yaxis": "y2",
77+
"zorder": 2
78+
},
79+
{
80+
"line": {
81+
"color": "darkred",
82+
"width": 15
83+
},
84+
"mode": "lines",
85+
"x": ["A", "B", "C", "D"],
86+
"y": [4.2, 1.2, 2.2, 3.2],
87+
"xaxis": "x2",
88+
"yaxis": "y2",
89+
"zorder": 1
90+
}
91+
],
92+
"layout": {
93+
"showlegend": true,
94+
"title": {
95+
"text": "zorder overlayed subplots",
96+
"subtitle": {
97+
"text": "case of multiple traces in one subplot"
98+
}
99+
},
100+
"width": 600,
101+
"height": 400,
102+
"xaxis2": {
103+
"overlaying": "x",
104+
"side": "top"
105+
},
106+
"yaxis2": {
107+
"overlaying": "y",
108+
"side": "right"
109+
}
110+
}
111+
}

0 commit comments

Comments
 (0)