How to add colored background bars in plotly.js chart

Question

How can "plot bands", or shaded areas in a chart, be added to a plotly-js chart? Something looking like this picture:

(Which comes from a different product: Highcharts)

Specifically, I would want to add background color to some portions (multiple of them) of a plotly chart, specifying [xFrom, xTo] coordinates for X, and painting the entire Y range, with arbitrary colors. For example, highlighting time windows of particular interest in a range (such as anomalies).

Answer 1

This example is from the documentation but is what you're looking for (highlighting the background of a range in a time series chart):

(Source here: https://plotly.com/python/shapes/#highlighting-time-series-regions-with-rectangle-shapes)

import plotly.plotly as py
import plotly.graph_objs as go

trace0 = go.Scatter(
    x=['2015-02-01', '2015-02-02', '2015-02-03', '2015-02-04', '2015-02-05',
        '2015-02-06', '2015-02-07', '2015-02-08', '2015-02-09', '2015-02-10',
        '2015-02-11', '2015-02-12', '2015-02-13', '2015-02-14', '2015-02-15',
        '2015-02-16', '2015-02-17', '2015-02-18', '2015-02-19', '2015-02-20',
        '2015-02-21', '2015-02-22', '2015-02-23', '2015-02-24', '2015-02-25',
        '2015-02-26', '2015-02-27', '2015-02-28'],
    y=[-14, -17, -8, -4, -7, -10, -12, -14, -12, -7, -11, -7, -18, -14, -14,
        -16, -13, -7, -8, -14, -8, -3, -9, -9, -4, -13, -9, -6],
    mode='lines',
    name='temperature'
)
data = [trace0]
layout = {
    # to highlight the timestamp we use shapes and create a rectangular
    'shapes': [
        # 1st highlight during Feb 4 - Feb 6
        {
            'type': 'rect',
            # x-reference is assigned to the x-values
            'xref': 'x',
            # y-reference is assigned to the plot paper [0,1]
            'yref': 'paper',
            'x0': '2015-02-04',
            'y0': 0,
            'x1': '2015-02-06',
            'y1': 1,
            'fillcolor': '#d3d3d3',
            'opacity': 0.2,
            'line': {
                'width': 0,
            }
        },
        # 2nd highlight during Feb 20 - Feb 23
        {
            'type': 'rect',
            'xref': 'x',
            'yref': 'paper',
            'x0': '2015-02-20',
            'y0': 0,
            'x1': '2015-02-22',
            'y1': 1,
            'fillcolor': '#d3d3d3',
            'opacity': 0.2,
            'line': {
                'width': 0,
            }
        }
    ]
}
py.iplot({'data': data, 'layout': layout}, filename='timestamp-highlight')

Result: https://plot.ly/create/?fid=jordanpeterson:810#/