Draw shapes behind plot?

Is it possible to alter the draw order of the shape so that a shape is drawn below the plot elements? We have a horizontal baseline line that is sometimes overlayed over data, bar markups, etc.

image

It would be nice if we could make the bars semi-transparent and have the line pass behind them.

1 Like

@rad Yes, you can give the position of shapes with respect to the trace plot,
inserting in the definition of each shape: layer='below'.

8 Likes

If the graph has gridlines and you use layer='below', the shapes will appear below the gridlines as well, which (at least in my case) is not desired. Is there a way to show shapes below traces but on top of the graph gridlines?

HI @wmachado, I’m not sure if thats possible, but mayby changing the color of the shape to an rgba string and reducing the opacity could help?

Hi @AIMPED, thank you for the response! Actually I have both cases, some shapes I’m drawing are supposed to be semi-transparent and others solid. Here’s a quick demonstration. The green shape has an rgba color and the purple ones have opacity 1. They all appear below the blue trace, which is desired, but also below the gridlines. The second purple vline (x=3) is barely noticeable because it’s right where a gridline is!

I’ve seen something similar discussed on the js side here: https://github.com/plotly/plotly.js/issues/4106, so maybe someone will look into this at some point.

Hi @wmachado, this question popped up quite a few times but I can’t recall a good answer for it, unfortunately. Obviously you want the grid lines to be visible, right?

Yes. In my case I only want the vertical gridlines to be visible, but those are enough to sometimes mess up my shapes, like in the case of the vertical purple line being cut out and almost invisible in my previous example.