Closed
Description
Description:
On cartesian SVG plots the zorder is not followed by overlaying subplots. Only the traces within the same subplot are ordered by zorder. Since overlaying axes create additional subplots (i.e xy, xy2) the traces in the main subplot are always below the overlaying subplot.
Reproduce this bug:
plotly.js version 2.29.1
Code
var data = [
{
"line": {
"width": 5
},
"mode": "lines",
"name": "x1y1",
"x": [
"A",
"B",
"C",
"D"
],
"y": [
50,
70,
90,
35
],
"type": "scatter",
"zorder": 1
},
{
"line": {
"width": 5
},
"mode": "lines",
"name": "x2y2",
"x": [
"A",
"B",
"C",
"D"
],
"xaxis": "x2",
"y": [
100,
200,
150,
190
],
"yaxis": "y2",
"type": "scatter",
"zorder": 2
},
{
"line": {
"width": 5
},
"mode": "lines",
"name": "x2y1",
"x": [
"A",
"B",
"C",
"D"
],
"xaxis": "x2",
"y": [
50,
70,
90,
35
],
"type": "scatter",
"zorder": 3
},
{
"line": {
"width": 5
},
"mode": "lines",
"name": "x1y2",
"x": [
"A",
"B",
"C",
"D"
],
"y": [
100,
200,
150,
190
],
"yaxis": "y2",
"type": "scatter",
"zorder": 4
}
];
var layout = {
"yaxis": {
"side": "right",
"ticklabelposition": "inside top"
},
"xaxis2": {
"overlaying": "x",
"side": "top"
},
"yaxis2": {
"overlaying": "y",
"side": "left",
"ticklabelposition": "inside top"
}
};
Plotly.newPlot('myDiv', data, layout);Output
The traces are in the order (from below to above): x1y1 (blue), x1y2 (red), x2y1 (green), x2y2 (orange).
They follow alphabetical order by subplot name
Expected output:
The traces should be in the order (from below to above): x1y1 (blue), x2y2 (orange), x2y1 (green), x1y2 (red).