Showing a simple matplotlib plot in plotly Dash

Question

Is it possible to show a simple matplotlib plot (the kind usually generated by plt.show()) in plotly's Dash framework? Or just plotly-like graphs with plotly's Scatters and Data traces?

Specifically I guess I need a different component than Graph (see below) and a way to return the simple plot in the update_figure function.

Example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import matplotlib.pyplot as plt

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    dcc.Slider(
        id='n_points',
        min=10,
        max=100,
        step=1,
        value=50,
    ),

    dcc.Graph(id='example') # or something other than Graph?...
])

@app.callback(
    dash.dependencies.Output('example', 'figure'),
    [dash.dependencies.Input('n_points', 'value')]
)

def update_figure(n_points):
    #create some matplotlib graph
    x = np.random.rand(n_points)
    y = np.random.rand(n_points)
    plt.scatter(x, y)
    # plt.show()
    return None # return what, I don't know exactly, `plt`?

if __name__ == '__main__':
    app.run_server(debug=True)

Idea: handle the matplotlib plot as a normal image and set it as a background image for a plotly graph — Nils
– Nils, Commented Jun 24, 2018 at 19:23
The answer to your question is given in this question - stackoverflow.com/questions/65960506/… — Sky_7
– Sky_7, Commented Jun 21, 2022 at 16:05

Andreus · Accepted Answer · 2021-03-19 19:17:32Z

18

Refer to https://plot.ly/matplotlib/modifying-a-matplotlib-figure/ . There is a mpl_to_plotly function in plotly.tools library that will return a plotly figure(which can then be returned to Graph's figure attribute) from matplotlib figure.

Edit: Just noticed you asked this a while back. Maybe the above is a new feature but its the cleanest way.

edited Mar 19, 2021 at 19:17

Andreus

2,50717 silver badges24 bronze badges

answered Aug 28, 2018 at 18:40

Haskar P

4204 silver badges10 bronze badges

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

2 Comments

Balepur Over a year ago

The above link is hitting a 404. Any alternatives?

stefaan1o Over a year ago

This feature is considered deprecated see github.com/plotly/plotly.py/issues/1568

simplyPTA · Accepted Answer · 2022-12-29 14:21:43Z

18

If you don't want an interactive plot, you can return a static one (found from this help)


import io
import base64

...
    
app.layout = html.Div(children=[
    ...,

    html.Img(id='example') # img element
])

@app.callback(
    dash.dependencies.Output('example', 'src'), # src attribute
    [dash.dependencies.Input('n_points', 'value')]
)
def update_figure(n_points):
    #create some matplotlib graph
    x = np.random.rand(n_points)
    y = np.random.rand(n_points)
    buf = io.BytesIO() # in-memory files
    plt.scatter(x, y)
    plt.savefig(buf, format = "png")
    plt.close()
    data = base64.b64encode(buf.getbuffer()).decode("utf8") # encode to html elements
    buf.close()
    return "data:image/png;base64,{}".format(data)

edited Dec 29, 2022 at 14:21

answered Jul 8, 2019 at 9:47

simplyPTA

4605 silver badges12 bronze badges

2 Comments

rictuar Over a year ago

When I took this approach, I was perpetually able to reaccess images. Thus, the RAM built during deployment until crashing. Can anyone advise?

simplyPTA Over a year ago

sr i forgot to close the stream : buf.close() just before return

king_potato · Accepted Answer · 2021-04-21 11:28:06Z

2

UserWarning: Starting a Matplotlib GUI outside of the main thread will likely fail

in my case it works, despite the warning message 👍👍

edited Apr 21, 2021 at 11:28

answered Apr 21, 2021 at 11:11

king_potato

414 bronze badges

Collectives™ on Stack Overflow

Showing a simple matplotlib plot in plotly Dash

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related