plotly.js
plotly.js copied to clipboard
zorder property for traces causes gridline to be drawn above traces
The release of plotly.js v2.35.1 solves the problem that the zorder property didn't work correctly with overlayed subplots with multiple traces in each subplot. See #7070 for more details.
With this fix, a new problem was introduced. The gridlines of the subplots are now being influenced by the zorder of the traces, which is an unwanted side effect.
This is demonstrated in this codepen.
The blue line is drawn behind the gridlines of the the y2 axis. This should not be the case, as gridlines should always default to be drawn behind traces. Interestingly, the orange line is drawn above the gridlines, even though it is linked to the same yaxis as the blue line and also has a lower zorder than all traces on the y2 axis.
cc: @my-tien , @archmoj , @gvwilson
Thanks @stephprobst for the report and details.
FYI, ticks and ticklabels are also affected. On the y-axes I have "ticklabelposition": "inside". On the right side you can see that they are hidden by some traces and on the left side you can see the gridline being drawn over the label. On the x-axis I have "ticks": "inside" with "ticklength": 10, but the ticks are being cut off.
Codepen: https://codepen.io/toffi-fee/pen/RwzOJbz