Boxplot trace behind area traces

plotly.js
1

So I’ve been asked to try and draw area traces behind some box traces on the same graph.
No matter what order I add them, the box traces are always behind the area traces.
Has anyone got any ideas of how to get the area traces behind the box traces?
All the traces are available as I can see the boxes at the edge of the areas.
Thanks in advance.

2

Hi @gnasher it seems indeed that box plots are always drawn under other traces. The workaround I found was to attach the box plots to another axis which is above the others. See the Python code below, the adaptation to Javascript should be easy I hope, using examples from https://plot.ly/javascript/multiple-axes/

import plotly.graph_objects as go

# define figure with scatter plot
fig = go.Figure(go.Scatter(x=[0, 1, 3, 4], y=[-0.5, 1, 1, 2],
                          fill='toself'))

# box plots
import numpy as np
y0 = np.random.randn(50) - 1
y1 = np.random.randn(50) + 1

fig.add_trace(go.Box(y=y0, yaxis="y2", fillcolor='red'))
fig.add_trace(go.Box(y=y1, yaxis="y2", fillcolor='forestgreen'))
fig.update_layout(yaxis2=dict(
        matches='y',
        layer="above traces",
        overlaying="y",       
    ),)
fig.show()

image
image793×414 7.41 KB

1 Like
3

@Emmanuelle you have just saved me a lot of confusion and effort. Thank you so much. It works perfectly. :grinning:

1 Like
4

@Emmanuelle sorry to both you with this again after all this time… I’ve just discovered an issue. I can’t figure out how to force the yaxes to be the same for this scenario. Please can you help?

5

I think there must be something wrong in my wider project, as it works perfectly when it’s output on its own: https://codepen.io/gemma-nash/pen/ZEQjrgd

6

argh, I was using an old version of Plotly!!! Ignore all ^^