✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Weird problem with empty plotly chart

Hello,

I have a weird problem. It drives me crazy. I cannot find the solution. Unfortunately it is hard to share the code as it is a proprietary multipage Dash app. But I will try to describe the problem.

  1. Locally everything works fine, no problems, no errors.
  2. When I deploy the app on the server, at first no problem, pages are loading, charts are displaying.
  3. But after I switch between pages, on one particular page instead of a chart there is an EMPTY chart. It remains empty untill I refresh the page. After that chart is displayed normally and never empty. But if I select new value in the dropdown, at first chart is normal, but after switching to another page and coming back chart is empty again!

I tried printing data for the chart and figure object, everything is normal. Even when chart is empty, data is there and the same as when chart was normal. Figure object is also as expected. But chart is empty.

it happens in any browser.

No errors in the console. I don’t know if this will help but here is the callback which returns a figure:

@app.callback(
    Output('license-ut-chart', 'figure'),
    [Input('ts-customer', 'value'),
     Input('view-mode', 'value'),]
)
def update_license_ut_chart(customer, view_mode):
    if customer is None:
        raise PreventUpdate
    else:
        dff = df[df['Account Name'].isin([customer])]
        if dff.shape[0] == 0:
            return dash.no_update
        else:
            if view_mode == "light":
                return license_utilization(dff)
            elif view_mode == "dark":
                return license_utilization(dff, mode="dark")

And here is the layout to display that graph:

html.Div([
                    html.Div([
                        dcc.Graph(
                            id="license-ut-chart",
                            className="chart-1-tab-1",
                            style={
                                'width': "100%",
                                'height': "100%"
                            }
                        )
                    ], className="ts-chart-container")
            ], className='stats-charts explanations')

Does anyone have an idea of what to check at least? I have tried everything with no success. I don’t know where to look anymore.

Thank you all!