# Convert matplotlib figure to image then output to dash

**URL:** <https://community.plotly.com/t/convert-matplotlib-figure-to-image-then-output-to-dash/44376>\
**Category:** Dash Python\
**Created:** [August 31, 2020, 2:54pm UTC](https://community.plotly.com/t/convert-matplotlib-figure-to-image-then-output-to-dash/44376 "2020-08-31T14:54:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fhalawa](https://avatars.discourse-cdn.com/v4/letter/f/8dc957/32.png) [@fhalawa](https://community.plotly.com/u/fhalawa)\
**Post date:** [August 31, 2020, 2:54pm UTC](https://community.plotly.com/t/convert-matplotlib-figure-to-image-then-output-to-dash/44376/1 "2020-08-31T14:54:14Z")

</div>

Hi,

I have a code that produces a figure using a matplot library. I am trying to use Dash to view the figure. Since the code is made using matplotlib I want to 1) save the fig as an image 2) output that image in the dashboard. I need to know what line of codes needed to 1) Include a place to add the image in the dash layout, 2) convert the fig into image, and 3) output the image. I am new to dash but it is a good learning 🙂

Thanks!

import matplotlib.pyplot as plt  
import matplotlib.patches as patches  
import math  
from numpy import genfromtxt

# floor plan sizes

limx = (0,Ylim)  
limy = (0,Xlim)

fig1 = plt.figure()  
ax = fig1.add\_subplot(111,aspect=“equal”)

# rectangles

for o in range(0,NumberBlocks):  
rect = plt.Rectangle((x1[o], y1[o]), x2[o]-x1[o], y2[o]-y1[o], color=‘gray’,fill=False)  
ax.add\_patch(rect)  
plt.text(Alpha[o],Beta[o],Names[o],size=6)

plt.rcParams[“figure.figsize”] = [30,10]

plt.ylim(limx)  
plt.xlim(limy)

fig1.show()

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [September 1, 2020, 9:29pm UTC](https://community.plotly.com/t/convert-matplotlib-figure-to-image-then-output-to-dash/44376/2 "2020-09-01T21:29:40Z")

</div>

Have you tried searching through the forum? I’d recommend searching matplotlib. I believe this was answered a couple of years ago.

---

<div class="post-metadata">

**Author:** ![fhalawa](https://avatars.discourse-cdn.com/v4/letter/f/8dc957/32.png) [@fhalawa](https://community.plotly.com/u/fhalawa)\
**Post date:** [September 2, 2020, 2:26am UTC](https://community.plotly.com/t/convert-matplotlib-figure-to-image-then-output-to-dash/44376/3 "2020-09-02T02:26:23Z")

</div>

thanks, I am currently looking into using a figure through plotly instead  
I used this type of fig, and it worked 🙂 better than an image, so now I can produce the figure using Plotly. Thanks for the tips by AnnMarieW!

```auto
import plotly.graph_objects as go 
fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)
# fig.add_trace( ... )
# fig.update_layout( ... )

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(id="my_graph", figure=fig)
])

```

You can update it in a callback too :