Getting Callback Error Updating Figure

Dash Python
1

Hello, I’m trying to run a Python dash project of an interactive dashboard. However, I received the following error message on one page with a defined table:

“Callback error updating … figure…”:

dash._grouping.SchemaTypeValidationError: Schema: [<Output reinv-snapshot-graph-backbook_income.figure>]
Path: ()
Expected type: (<class ‘tuple’>, <class ‘list’>)
Received value of type <class ‘plotly.graph_objs._figure.Figure’>

In the code I define the callback as follows:

@app.callback(
    [
        Output('reinv-snapshot-graph-backbook_income', 'figure')
    ],
    [
        Input('reinv-snapshot-radio-income_table_metric', 'value'),
        Input('reinv-snapshot-income_table', 'data'),
    ],
    prevent_initial_call=False,
)

And I use another script which contains the layout:

dbc.Col(
                        dcc.Graph(
                            id="reinv-snapshot-graph-backbook_income",
                            figure={
                                'layout': PLT_IO_LAYOUT_TEMP,
                            },
                        ),
                        width=10,
                    ),

Could anyone help me understand and resolve this issue? Thanks!

2

Hi @JoyChen0528 and welcome to the Dash community :slightly_smiling_face:

You will see that error if you put the Output(…) in a list. and return a variable rather than a list or a tuple. So you can fix it in one of two ways:

  1. Return the figure in a list like this
return [fig]
  1. Remove the [ … ] from the inputs and Outputs. It’s no longer necessary to put the Outputs and Inputs in a list if you are using the current version of dash, so your callback can look like this (which is prettier :lipstick:)
@app.callback(    
    Output('reinv-snapshot-graph-backbook_income', 'figure'),
    Input('reinv-snapshot-radio-income_table_metric', 'value'),
    Input('reinv-snapshot-income_table', 'data'),
    prevent_initial_call=False,
)
....
1 Like
3

Thanks so much for this explanation! I will try it.

I also get some similar errors while clicking on the side bar on my UI with the updated dash version:

dash._grouping.SchemaLengthValidationError: Schema: [<Output `sidebar.children`>, <Output `page-content.children`>]
Path: ()
Expected length: 2
Received value of length 3:
[<function sidebar_reinv_mix at 0x7f7e4a8a0c10>, Jumbotron([H1(children='404: Not found', className='text-danger'), Hr(None), P('The pathname /upload was not recognised...')]), '{"py/object": "src.tracker_store.TrackerStore", "_current_step": "start", "_all_log_str_dict": {"start": "Click the icon to upload your mix files", "check": "check the mix files\' quality", "upload": "upload the files to PolyPaths", "calculate": "calculate the base analytics via PolyPaths", "complete": "ready to go"}, "_all_log_p_lst": [["Click the icon to upload your mix files"], ["check the mix files\' quality"], ["upload the files to PolyPaths"], ["calculate the base analytics via PolyPaths"], ["ready to go"]], "_poly_params": {}, "_hist_pipeline_log": []}']

The code that defines the side bars are as follows:

@app.callback(
    [
        Output("sidebar", "children"),
        Output("page-content", "children"),
    ],
    [
        Input("url", "pathname"),
    ],
    [
        State('session-id', 'data'),
    ]
)
def render_page_content(pathname, session_id):
    tracker_store = SESSION_MANAGER.get_tracker_store(session_id)
    reinv_mix_store = SESSION_MANAGER.get_reinv_mix_store(session_id)
    pricing_date = tracker_store.pricing_date

    if pathname in [app_root+"/", app_root+"/snapshot"]:
        return [sidebar_reinv_mix('snapshot', pricing_date), page_snapshot()]
    elif pathname == app_root+"/upload":
        return [sidebar_reinv_mix('upload', pricing_date), page_upload(tracker_store, reinv_mix_store)]
    elif pathname == app_root+"/analytics":
        return [sidebar_reinv_mix('analytics', pricing_date), page_analytics(reinv_mix_store)]
    elif pathname == app_root+"/forecast":
        return [sidebar_reinv_mix('forecast', pricing_date), make_page_forecast(reinv_mix_store)]
    # If the user tries to reach a different page, return a 404 message
    return [
        sidebar_reinv_mix,
        dbc.Jumbotron(
            [
                html.H1("404: Not found", className="text-danger"),
                html.Hr(),
                html.P(f"The pathname {pathname} was not recognised..."),
            ]
        ),
        tracker_store.to_json(),
    ]

Could you help me understand why it is the case? Is this error caused by dash version upgrade as well?

4

Hi @JoyChen0528 ,

This is a different error:

dash._grouping.SchemaLengthValidationError: Schema: [<Output sidebar.children>, <Output page-content.children>]
Path: ()
Expected length: 2
Received value of length 3:

So this says that it’s expecting 2 outputs but received 3. If you look at your last return, it is the one throwing the error. It has 3 items, the sidebar, the jumbotron and the tracker_store.to_json()

5

Hi Ann @AnnMarieW thanks for the explanation! Sorry I’m relatively new to Plotly dash and I’m still confused about this side bar error.

My app runs fine while running locally on http://127.0.0.1:8000 . However, when I tried deploying it to http://0.0.0.0:8000 based on the requirement of my company’s platform, I saw this sidebar error expecting length of 2 but ending up receiving 3 values. It’s strange because I can render every page without errors if I run my app locally using http://127.0.0.1:8000.

If I comment out the line in the return “tracker_store.to_json(),” , I will receive a new error saying that the value type is wrong (should be in json format).

Any idea/suggestion about how to resolve this issue will be greatly appreciated. Thanks!

6

When you run it locally, it may not get to that last return statement with the 404 message. You could try going to an invalid page locally and see if you get the same message (I expect you will)

Look at this return statement:

return [sidebar_reinv_mix('upload', pricing_date), page_upload(tracker_store, reinv_mix_store)]

It has two items, a function which I’m guessing creates the sidebar, and a function that creates the page content. This will not cause the error because you have two Outputs the “sidebar” and the “page-content”.

This return statement has 3 items.

  1. The sidebar function - (but it doesn’t look right because it’s missing arguments).
  2. The Jumbotron component
  3. the `tracker_store.to_json(),
return [
        sidebar_reinv_mix,
        dbc.Jumbotron(
            [
                html.H1("404: Not found", className="text-danger"),
                html.Hr(),
                html.P(f"The pathname {pathname} was not recognised..."),
            ]
        ),
        tracker_store.to_json(),
    ]

This causes the error because there are only 2 Outputs and you return 3 items. I don’t know what you do with the tracker, but maybe you need to create another function similar to :
page_upload(tracker_store, reinv_mix_store)

7

Thanks so much! I was able to resolve the issue after deleting “sidebar_reinv_mix” function in the output. Now I only have two returns to match the two Outputs in the callback and I’m able to navigate to other pages.

Really appreciate your help on this matter.

1 Like