Adding my output graph as a children property of the component stopped my input from working correctly?

Dash Python
1

Hey, pretty simple problem. I had a graph that would dynamically plot all the values a user enters in the input. They layout had an empty graph on screen(dcc.Graph in layout) even without data entered from the user.

I wanted to change the behavior of my graph work and make it a little more aesthetically pleasing, by having the graph only appear on-screen when a user enters values in the input. To do that I added dcc.Graph in the callback function, using html.Div(id='output-graph') as it’s front-end ID.

After making the changes, my graph stopped working correctly and now only plots the FIRST value a user has entered in the input. It doesn’t matter how many inputs have been entered and acknowledged by the dropdown, my graph won’t plot the remaining ones. Below is my code, I removed everything else apart from the subjects talked about, I didn’t want to clutter the space. If the HTML layout looks wonky that is why.

Could really appreciate some help here. I tried investigating State but I don’t think that would help me here. Curious to know what I did wrong here. Everything else works fine, the flow of data from my dB is not an issue with my other callbacks that use the same input as my graph.

app.layout = html.Div( 
               dbc.Container(dcc.Dropdown(id="dynamic-dropdown", options=options, multi=True, placeholder="Enter Symbols of Interest"),
               html.Div(id='output-graph'),lg=8, md=11, xs=12),justify="center"))


@app.callback(
    dash.dependencies.Output('output-graph', 'children'),
    [dash.dependencies.Input('dynamic-dropdown', 'value')])

def tickers(symbols):
    conn.rollback()
    if symbols == None:
        raise PreventUpdate
    elif symbols == '':
        raise PreventUpdate


    stock_info = {}
    d = {} #dates
    p = {} #prices

    sym_ids = tuple([id for id in symbols])

    stock_info = {}
    stock_info = get_dict_resultset("SELECT symbol, date, close FROM security_price WHERE security_price.symbol IN %s;", [sym_ids])

    stock_data_by_symbol = defaultdict(list)
    for entry in stock_info:
        symbol = entry['symbol']
        stock_data_by_symbol[symbol].append(entry)

    trace = []
    for stock in symbols:
        d[stock] = [rec['date'] for rec in stock_data_by_symbol[stock]] 
        p[stock] = [rec['close'] for rec in stock_data_by_symbol[stock]]
        trace.append(go.Scatter(x=d[stock],
                             y=p[stock],
                             mode='lines',
                             text = d[stock],
                             opacity=0.7,
                             name=stock,
                             textposition='bottom center'))


    traces = [trace]
    data = [val for sublist in traces for val in sublist]
    figure = {'data': data,
              'layout': go.Layout(
                  colorway=["#5E0DAC", '#FF4F00', '#375CB1', '#FF7400', '#FFF400', '#FF0056'],
                  paper_bgcolor='rgba(0, 0, 0, 0)',
                  plot_bgcolor='rgba(0, 0, 0, 0)',
                  margin={'b': 15},
                  hovermode='x',
                  autosize=True,
                  title={'text': 'Historical Price Graph', 'font': {'color': 'black'}, 'x': 0.5},
                  
              ),

              }
    
    

    return dcc.Graph(id='output-graph', figure=figure, config={'displayModeBar': False}, animate=True)