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 · Accepted Answer · 2020-08-04 00:03:47Z

1

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.

answered Aug 4, 2020 at 0:03

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CHRD Over a year ago

Thanks! I structured it like that just to make it look nice. Didn't consider the consequences.. XD

Collectives™ on Stack Overflow

Passing Figure object to Graph in plotly dash

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related