Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

How can I return subplots in callback

I’m having a difficulty trying to return subplots in a callback function. I have made a scatter plot in the function

    scatter_plot = px.scatter(
        data_frame=dff,
        x=x,
        y=y,
        color='make',
    )

And output it to a Div

html.Div(children=[
            dcc.Graph(id='scatter-plot')
        ]),

In the function, if I just do return scatter_plot, it works perfectly fine. But as soon as I create a subplots and append the scatter plot and returning it, I get an error message about “Invalid element(s) received for the ‘data’ property…”

    fig = make_subplots(rows=1, cols=1)
    fig.append_trace(scatter_plot, 1, 1)
    return fig

Any advice would be appreciated!

It would help if you showed your callback function. I assume you have something like

Output("scatter_plot", "data")

.
You should change the “data” to “figure” for the return, then it might work.

I had a double check, it’s already figure as output, and still getting the same error.

@app.callback(
    Output('scatter-plot', 'figure'),
    Input(...),
)

An additional note, I gave graph_objects a try, i.e. go.Scatter(), and the scatter plot from there seems to work. And also it seems like this also works,

fig = make_subplots(rows=1, cols=1)
fig.add_scatter(x=x, y=y)
return fig

but just not with plotly express.

@app.callback(
    Output('scatter-plot', 'figure'),
    Input(...),
)
def some_name(var,var2,..):
    scatter_plot = px.scatter(
        data_frame=dff,
        x=x,
        y=y,
        color='make',
    )
    fig = make_subplots(rows=1, cols=1)
    fig.append_trace(scatter_plot, 1, 1)

    return {
        'data': fig,
        'layout': some_layout
    }

try to return a dict instead…