How to correctly display scatter plot and table as single figure

Dash Python
1

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'),
dcc.Dropdown(
    id='my-dropdown',
    options=[
        {'label': 'Coke', 'value': 'COKE'},
        {'label': 'Tesla', 'value': 'TSLA'},
        {'label': 'Apple', 'value': 'AAPL'}
    ],
    value='COKE'
),
dcc.Graph(id='my-graph')
])

@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
...
...
...
trace_open = go.Scatter(
            x=df.index,
            y=df.open,
            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__':
    app.run_server()

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

dcc.Graph(id='my-table')

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…

2

hi! create html.div and with callback return both table and plot to that div’s ‘children’ property.
something like that:
`html.Div(id=‘keeper’)
…
@app.callback(dash.dependencies.Output(‘keeper’,‘children’),
[inputs])
def update_keeper(inputs):
return [table,graph]

1 Like
3

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