# Showing matplotlib figures with Dash (mpl\_to\_plotly)

**URL:** <https://community.plotly.com/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710>\
**Category:** Dash Python\
**Created:** [November 16, 2018, 11:14am UTC](https://community.plotly.com/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710 "2018-11-16T11:14:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gokirop](https://avatars.discourse-cdn.com/v4/letter/g/53a042/32.png) [@gokirop](https://community.plotly.com/u/gokirop)\
**Post date:** [November 16, 2018, 11:14am UTC](https://community.plotly.com/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710/1 "2018-11-16T11:14:40Z")

</div>

Hello,

I am new to Dash, and I would like to use it to publish my existing code online. Within a code I have a lot of matplotlib figures, so I am looking for the most convenient way to upload them. I think the easiest way is to use mpl\_to\_plotly. However, I am not successful in getting the output. I have tried producing a minimal example - just a simple Dash app that is going to post a simple matplotlib figure. I am attaching the code below:

import dash  
from dash.dependencies import Input, Output, State  
import dash\_core\_components as dcc  
import dash\_html\_components as html  
import dash\_table\_experiments as dt  
import json  
import pandas as pd  
import numpy as np  
import plotly  
import os  
import csv  
import plotly.tools as tls  
import plotly.graph\_objs

import matplotlib.pyplot as plt

app = dash.Dash()

app.scripts.config.serve\_locally = True

# app.css.config.serve\_locally = True

app.layout = html.Div([  
html.Div(id=‘graphs’,children=dcc.Graph(id=‘dummy’)),  
])

fig = plt.figure()  
ax = fig.add\_subplot(111)  
ax.plot([1, 2, 3, 4], [10, 20, 25, 30], color=‘lightblue’, linewidth=3)  
ax.scatter([0.3, 3.8, 1.2, 2.5], [11, 25, 9, 26], color=‘darkgreen’, marker=‘^’)  
ax.set\_xlim(0.5, 4.5)

fig\_url=tls.mpl\_to\_plotly(fig)

dcc.Graph(id=‘graphs’, figure=fig\_url)

app.css.append\_css({  
‘external\_url’: ‘[https://codepen.io/chriddyp/pen/bWLwgP.css](https://codepen.io/chriddyp/pen/bWLwgP.css)’  
})

if **name** == ‘ **main** ’:  
app.run\_server(debug=True)

However, this code just produces a blank figure as below. Do you have idea on what could be wrong?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/c4ee4ed36e6681529e2bf034d3af40ff96850a03.png)

---

<div class="post-metadata">

**Author:** ![tbillah](https://avatars.discourse-cdn.com/v4/letter/t/d6d6ee/32.png) [@tbillah](https://community.plotly.com/u/tbillah)\
**Post date:** [April 10, 2020, 6:31pm UTC](https://community.plotly.com/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710/2 "2020-04-10T18:31:51Z")

</div>

See the complete example, if helpful anyway:

```python
from plotly.tools import mpl_to_plotly
from matplotlib import pyplot as plt
import dash
import dash_html_components as html
import dash_core_components as dcc

app= dash.Dash()

fig= plt.figure()
ax= fig.add_subplot(111)
ax.plot(range(10), [i**2 for i in range(10)])
ax.grid(True)
plotly_fig = mpl_to_plotly(fig)

app.layout= html.Div([
    dcc.Graph(id= 'matplotlib-graph', figure=plotly_fig)

])

app.run_server(debug=True, port=8010, host='localhost')

```

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [August 10, 2020, 2:26am UTC](https://community.plotly.com/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710/3 "2020-08-10T02:26:31Z")

</div>

Just a heads up: `mpl_to_plotly` no longer works with the current version of matplotlib, and is considered to be deprecated.

> <https://github.com/plotly/plotly.py/issues/1568>
>
> To repro, run this:
> import matplotlib.pyplot as plt
> import plotly.tools
> f = plt.figure()
> plt.plot(\[1,2,3,4\])
> plotly.tools.mpl\_to\_plotly(f)
> ...which will result in this warning being printed to the console:
> (...)/lib/python3.6/site-packages/plotly/matplotlylib/mpltools.py:368: MatplotlibDeprecationWarning:...

---

<div class="post-metadata">

**Author:** ![KLTY](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@KLTY](https://community.plotly.com/u/KLTY)\
**Post date:** [December 15, 2021, 3:37pm UTC](https://community.plotly.com/t/showing-matplotlib-figures-with-dash-mpl-to-plotly/15710/4 "2021-12-15T15:37:27Z")

</div>

Oh no, do you happen to know what is the alternative solution to displaying the matplotlib figure in dcc?