Black Lives Matter. Please consider donating to Black Girls Code today.

How to correctly display scatter plot and table as single figure

Trying to create a scatter plot and table as one figure and have it almost working. The problem is the table is on top of the scatter plot. I have the following based on example from the dash home page:

app.layout = html.Div([
html.H1('Stock Tickers'),
        {'label': 'Coke', 'value': 'COKE'},
        {'label': 'Tesla', 'value': 'TSLA'},
        {'label': 'Apple', 'value': 'AAPL'}

@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
trace_open = go.Scatter(
            name = "Open",
            line = dict(color = '#000000'),
            opacity = 0.8)

table_trace = go.Table(
    header=dict(values=['A Scores', 'B Scores']),
    cells=dict(values=[[100, 90, 80, 90],
                   [95, 85, 75, 95]]))

return {
    'data': [trace_open, table_trace]

if __name__ == '__main__':

Any thoughts on how can I get the table below the scatter plot? I thought adding to the app.layout


but I’d like to use the same df to build the plot & table. If I create a second @app.callback then I end up pulling the data twice…

hi! create html.div and with callback return both table and plot to that div’s ‘children’ property.
something like that:

def update_keeper(inputs):
return [table,graph]

1 Like

Thanks for the feedback roman. I ended up passing df to second @app.callback so don’t have to pull data twice.