PlotlyJS: how to introduce shapes into time series?

General Usage
2

Your rectangle coordinates x0= "period10_5[50]", x1="period10_5[70]", are strings with no significance for plotly.js. They cannot be converted to the corresponding Date.

To get plotted your shapes, replace these strings by Date(period10_5[50]), etc.
But in this case the function rect doesn’t work and the two shapes are overlayed.

Instead,use the default definition of a rectangle https://plotly.com/javascript/reference/layout/shapes/,
i.e. replace your shape definition with:

common_attr = (fillcolor = "red", opacity = 0.2, line_width = 0,
               xref = period10_5, yref = "paper" )
shapes =[attr(type="rect", x0=Date(period10_5[50]), y0=0, x1= Date(period10_5[70]), y1=1; common_attr..., ), 
         attr(type="rect", x0=Date(period10_5[120]), y0=0, x1= Date(period10_5[150]), y1=1; common_attr...,)]

shapes

1 Like