Passing Figure object to Graph in plotly dash

Question

When I try to pass a Figure object to the dcc.Graph() in my layout, I get en error that says:

dash.exceptions.InvalidCallbackReturnValue: The callback ..graph.figure.. is a multi-output.
    Expected the output type to be a list or tuple but got: 
    Figure({# the content of the figure})

my code is like:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

app.layout = html.Div([
    dcc.Graph(
        id='graph'
    )
])

@app.callback(
    [
        Output('graph', 'figure'),
    ],
    [
        Input('my-input', 'value')
    ]
)
def gen_graph(value):
    dff = # my filtered df
    fig = px.line(dff, x='x_var', y='y_var')
    return fig

Feels like I'm missing something in how the Figure should be passed to the dcc.Graph(). Any ideas?

coralvanda coralvanda · Accepted Answer · 2020-08-04T00:03:47

You structured your Output as a list, that makes it a multi-output callback. Just change it like this:

@app.callback(
    Output('graph', 'figure'),
    [
        Input('my-input', 'value')
    ]
)
def gen_graph(value):
    ...

Alternatively, you could wrap your output in brackets to make it a list (return [fig]). Either way should work fine.

Passing Figure object to Graph in plotly dash

1 Answers