How to color grid with 2 different rectangular horizontal bars

plotly.js
1

Hello,

I’m looking to color the background of my graph different colors based on the y axis range. For example, the graph portion within y axis range [0, 500] would be colored red to indicate bad values. The range (500, 1000] would be colored green to indicate good values.

To be clear, I’m referring to the background color. The color of traces, ticks, etc. are irrelevant to my problem. Thanks for any help.

  • Justin
2

I forgot to mention. This graph will be streaming time series , so the x axis range is constantly changing. I would actually like the time delta of x axis to remain constant while the data trace slides instead of bunches.

3

Here’s how: https://codepen.io/etpinard/pen/Rwbaxem

4

What am I doing wrong here?

import plotly.graph_objects as go

go.newPlot('graph', [{
  x: [0, 500, 1000]
}], {
  shapes: [{
    type: 'rect', 
    layer: 'below',
    xref: 'paper', xref: 'x',
    x0: 0, x1: 100,
    y0: 0, y1: 500,
    fillcolor: 'red',
    line: {width: 0}
  }, {
    type: 'rect', 
    layer: 'below',
    xref: 'paper', yref: 'y',
    x0: 0, x1: 1,
    y0: 500, y1: 1000,
    fillcolor: 'green',
    line: {width: 0}
  }]
})

fig = go.Figure(data=go.Scatter(
        x=[0, 1, 2],
        y=[6, 10, 2],
        error_y=dict(
            type='data', # value of error bar given in data coordinates
            array=[1, 2, 3],
            visible=True)
    ))
fig.show()

I am sorry, this does the trick

# Add shape regions
fig.add_vrect(
    x0=1, x1=3,
    fillcolor="LightSalmon", opacity=0.5,
    layer="below", line_width=0,
),

see https://plotly.com/python/shapes/#highlighting-time-series-regions-with-rectangle-shapes