Showing a simple matplotlib plot in plotly Dash

[gsimchoni]

I posted this question about a week ago on SO and got no answers, thought I'd try my luck here:

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)

[chriddyp]

Yes, this is possible. You could use the html.Img component, fill out the src key with a base64 encoded version of the matplotlib plot. There is an example here: https://github.com/4QuantOSS/DashIntro/blob/master/notebooks/Tutorial.ipynb, which was shared in the Dash community forum here: https://community.plot.ly/t/can-i-run-dash-app-in-jupyter/5235/2.

I recommend posting your implementation questions in the Dash Community Forum, it's quite active: https://community.plot.ly/c/dash

[evageiger]

I actually found a solution for this which even allows interaction. See:
https://community.plot.ly/t/is-it-possible-to-use-custom-plotly-offline-iplot-mpl-code-in-dash/6897
and
https://community.plot.ly/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710

[tashrifbillah]

Hi @gsimchoni , have you figured out based on the above suggestions what to return?