11

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

enter image description here

(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).

herchu
  • 936
  • 7
  • 24

1 Answers1

9

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#/

rgk
  • 985
  • 8
  • 16
  • Thanks! It appears to be exactly what I needed. Would you mind adding the link to documentation where you obtained it? – herchu Mar 07 '19 at 18:21
  • 1
    Absolutely! I was going to link and then I realized it's super long and their site doesn't have any anchors configured (whomp). Here's the full page: https://plot.ly/python/shapes/ – rgk Mar 07 '19 at 18:26
  • 1
    Great! In fact I had been in that page and missed it. If anyone else is looking for this code example, it is under "Highlighting Time Series Regions with Rectangle Shapes" in the link from @rgk. Thanks! – herchu Mar 07 '19 at 18:31
  • @herchu If the answer provided by rgk was exactly what you were looking for, would you consider marking it as the accepted answer? That makes it easier for others to see whether a question has received an answer or not. – vestland Mar 19 '19 at 10:05