Some parts of figure not displayed when converting matplotlib figure to plotly figure and displaying on webpage with dash

Dash Python
1

I have a function that plots a matplotlib figure. I want to modify and use this function to display the plots on webpages with dash. So, the only modification I did on this function is I replaced the plt.show() at the end to return fig. Then, I used the mpl_to_plotly function described here to convert the matplotlib figure object into a plotly figure object. Finally, I’m using this plotly figure object in a dcc graph to display it in a webpage. The relevant part of my code to do this is:

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('input', 'value')])
def update_output(value):
	mpl_fig = matplotlib_fig_plotting_function(param1, param2)
    plotly_fig = tls.mpl_to_plotly(mpl_fig)

    return dcc.Graph(
        id='summary-plot_graph',
        figure={
            'data': plotly_fig,
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                },
                'title': 'value'
            }
        }
    )

It plots most of the matplotlib figure, however it does not plot the names of the features in my data and also the colorbar. The figures plotted by matplotlib look like so:

SHAP%20-%20User%20Profile%20-%20All%20Scores%20-%20New
SHAP - User Profile - All Scores - New.png575×676 50.9 KB

But when plotted in dash, it looks like so:

Capture
Capture.PNG494×866 32.3 KB

Like I said, it doesn’t plot the column names in the dataset, which it replaces with numbers sequentially, and the colorbar. Otherwise, it works fine, is interactive with mouse-hover displaying values, zooming in by selecting an area, etc.

How do I fix this?

Also, maybe this would be relevant, just before plotting the figure/graph, this is what it shows on the console from where I’m running that app:

C:\Users\h473\AppData\Local\Programs\Python\Python35\lib\site-packages\plotly\matplotlylib\mplexporter\exporter.py:82: UserWarning:

Blended transforms not yet supported. Zoom behavior may not work as expected.

C:\Users\h473\AppData\Local\Programs\Python\Python35\lib\site-packages\plotly\matplotlylib\renderer.py:384: UserWarning:

Bummer! Plotly can currently only draw Line2D objects from matplotlib that are in 'data' coordinates!

C:\Users\h473\AppData\Local\Programs\Python\Python35\lib\site-packages\plotly\matplotlylib\renderer.py:445: UserWarning:

Dang! That path collection is out of this world. I totally don't know what to do with it yet! Plotly can only import path collections linked to 'data' coordinates

127.0.0.1 - - [11/Oct/2018 15:48:36] "POST /_dash-update-component HTTP/1.1" 200 -

Its not an error, but it definitely looks like a warning that might have something to do with the missing feature names and the colorbar.

2

Did you ever figure a workaround for this? I’m trying to do the exact same thing, and have been getting the same results as you.

3

There are many limitations in mpl_to_plotly and we haven’t updated this code in years. The code is pretty gnarly and we decided to double down on the native plotly syntax instead of continuing to work on these converters.

So, if it works for you then that’s great! But if it doesn’t, I recommend:

  1. Modifying the returned fig yourself after converting
  2. Or, recreating the figure with the plotly syntax
  3. Or, embedding the matplotlib figure as a static image in your app with html.Img(src='...') where source is the base64 encoded version of the image (https://stackoverflow.com/questions/38061267/matplotlib-graphic-image-to-base64)
2 Likes