Drawing multiple lines based on a list on the graph

Hi,

Currently I have under ‘shapes’ something like this:

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    # html.H1(
    #     children='Hello Dash',
    #     style={
    #         'textAlign': 'center',
    #         'color': colors['text']
    #     }
    # ),
    #
    html.Div(children='Demonstration of Web-based Dashboard', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph',
        figure={

            'data': [
                {'x': forecast['ds'], 'y': forecast['yhat_lower'], 'type': 'line', 'line': {'width': 0},
                 'name': 'Lower Pred', 'showlegend': False, 'hoverinfo': 'none'},
                {'x': forecast['ds'], 'y': forecast['yhat'], 'type': 'line', 'name': 'Prediction', 'color': 'blue',
                 'fillcolor': 'rgba(68, 68, 68, 0.1)',
                 'fill': 'tonexty', 'line': {'color': 'rgb(22, 96, 167)'}},
                {'x': forecast['ds'], 'y': forecast['yhat_upper'], 'type': 'line', 'fillcolor': 'rgba(68, 68, 68, 0.1)',
                 'fill': 'tonexty', 'line': {'width': 0}, 'name': 'Upper Pred', 'showlegend': False,
                 'hoverinfo': 'none'},
                go.Scatter(
                    x=df['Date'],
                    y=df['Base_Rev'],
                    mode='markers',
                    name='Actual',
                    line=dict(color='rgb(0, 0, 0)', width=0),
                )
            ],

            'layout': {
                'title': 'Network Revenue Prediction vs Actual',
                'xaxis': dict(
                    rangeselector=dict(
                        buttons=list([
                            dict(count=1,
                                 label='1m',
                                 step='month',
                                 stepmode='backward'),
                            dict(count=6,
                                 label='6m',
                                 step='month',
                                 stepmode='backward'),
                            dict(count=1,
                                 label='YTD',
                                 step='year',
                                 stepmode='todate'),
                            dict(count=1,
                                 label='1y',
                                 step='year',
                                 stepmode='backward'),
                            dict(step='all')
                        ])
                    ),
                    rangeslider=dict(
                        visible=True
                    ),
                    type='date'
                ),
                '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': '2018-05-01',
                        'y0': 0,
                        'x1': '2018-08-01',
                        'y1': 1,
                        'fillcolor': '#d3d3d3',
                        'opacity': 0.2,
                        'line': {
                            'width': 0,
                        }
                    },
                    # Line Vertical
                    {
                        'type': 'line',
                        'x0': '2018-05-01',
                        'y0': 0,
                        'x1': '2018-05-01',
                        'y1': 200000000,
                        'line': {
                            'color': 'rgb(55, 128, 191)',
                            'width': 1,
                            'dash': 'dot',
                        },
                    },
                ]
            }
        }
    ),


    html.Div(children='Demonstration of Web-based Dashboard', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

])

It works but I need more functionality here…
Say I have a list of dates [‘2018-04-01’, ‘2018-05-01’, 2018-08-01’]
How can I automatically have Dash draw lines for these three items, based on the contents of the list?
Pardon me I’m still new to Dash…

Thanks.

It’s fine, managed to figure it out.
Just define the list outside app.layout whereever your computation code is.

and do

‘shapes’ : shapes_list_you_defined

hi, do you have an example of how you did multiple lines as shapes in layout? I dont quite get what you mean by the shapes_list_you_defined and where in the code above did you put it?

I’m trying to overlay vertical lines on my time series plots at quarterly intervals.