Matplotlib charts in multipage app

Dash Python
1

Hi, I’m using Dash’s multi-page functionality, and trying to implement a matplotlib chart on one of my pages. I get the error “Starting a Matplotlib GUI outside of the main thread will likely fail” and the graphs don’t display, which I attribute to matplot’s inability to work with dash’s (multithreaded?) backend. Any help would be appreciated. I’m aware I might be able to circumvent the issue by serving a static image, but I’d really like to use the interactive matplotlib chart if possible. Thanks!

The important bits of my app.py:

app = dash.Dash(
    __name__,
    use_pages=True,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    external_scripts=["https://cdn.tailwindcss.com"],
    suppress_callback_exceptions=True
)

The important piece of the page I want to display (using the test from Create Interactive Altair, Matplotlib, Bokeh Visualizations with Dash - Plotly - YouTube (thanks adamschroeder!):

dash.register_page(__name__) #using the normal method to register the dash page

def layout():
    dbc.Container([
        html.Iframe(
            id='bar-plot',
            srcDoc=None,  # here is where we will put the graph we make
            style={'border-width': '5', 'width': '100%',
                'height': '500px'}),
])

callback(
    Output('bar-plot', 'srcDoc'),
    Input('yeardropdown', 'value'),
    Input('distdropdown', 'value')
)
def plot_data(selected_year, selected_district):

    # filter data based on user selection
    dff = df[df.Year == selected_year]
    dff = dff[dff.District == selected_district]

    # build scatter plot
    #... etc etc

    return html_scatter, html_bar, mytable
2

I think the recommended approach is converting the matplotlib figure to an image and putting it inside an html.Img component. as suggested here: Best way to incorporate matplotlib plot in Dash App - #2 by chriddyp

Also see this Stack Overflow answer: python - Showing a simple matplotlib plot in plotly Dash - Stack Overflow

3

Yeah, I’m aware of that method. I’d prefer to have the interactive capability or at least know if it’s possible. It works fine as its own applet, just not within the ‘pages’/multithreaded dash app.