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.