Shape appears in front of trace and grid

Hi there! I’m farily new to plotly and js in general so I hope I’m not asking a dumb question.
I’m generating my layout with some fixed shapes and then the data is updated regularly. The shapes appear to be always in the front. This is the code that generates my plot.

// creating plot x=y
		var trace = {
			x: [0, 20], 
			y: [0, 20],
			mode: 'lines',
			layer: 'above',
			line: {
				color: 'gray',
				width: 2

		var layout = {
			xaxis: {
				title: 'x',
			yaxis: {
				title: 'y',
			shapes: [
					type: "rect",
					xref: "paper",
					yref: "y",
					x0: 0,
					y0: 5,
					x1: 1,
					y1: 10,
					opacity: 0.5,
					layer: 'below',
					fillcolor: "rgb(200, 255, 200)",
					line: {
						color: "white",
					type: "line",
					xref: "paper",
					yref: "y",
					x0: 0,
					y0: 20,
					x1: 1,
					y1: 20,
					opacity: 0.8,
					line: {
						color: "rgb(255, 0, 0)",
						width: 1,
						dash: "dashdot",
			title: 'X=Y',
			autosize: true,
			margin: {
				l: 60,
				r: 60,
				b: 10,
				t: 10,
				pad: 10
		Plotly.newPlot('XYplot', [trace], layout, {displayModeBar: false});

I actually have a function that modifies those x and y values but to make it “complete” I have overwritten those variables here and made a simple X=Y graph.

The output to that code is this:
as you can see, the shape appears in front of my data trace and the grid, even though I defined it to be “below” and I also defined the trace to be “above”. I read some other posts in the forum that suggested this “layer” fix but in python, maybe it doesn’t work the same in vainilla js?

Could you help me? I’m not sure what I’m doing wrong.

Hey @serafinimc Welcome to the community.


I had seen that post, but contrary to them I had the “layer” instruction in the right place and it still didn’t work.

But… I just realized that my html file was loading an older version of plotly for JavaScript:
<script src=""></script>
and changing that to version 2.32.0 (latest according to: Getting started in JavaScript) fixed the layer order but something else broke and now some of my traces are not showing. But the simplified testing code is working so that issue must be somewhere else.

So I guess we could close this since the original problem was fixed by updating the plotly version?

Thank you for answering so quicky!

1 Like