Search code examples
pythonplotlyjupyter-labnbconvert

Exporting Jupyter notebook with plotly to html not displaying correctly when offline

I am using Jupyter lab, everything works fine within jupyter lab even when I am offline. However whenever I try to export the report to HTML. the plotly plots are not rendered. If I turn on my internet connection the plots are rendered, just fine.

Here is a sample code:

import pandas as pd
import numpy as np
import plotly.express as px

df = pd.DataFrame(np.random.randn(100,4), columns='A B C D'.split())

px.scatter(df, x='A',y='B')

I have tried following the troubleshooting guide for plotly shown here. Additionally I tried installing on a fresh environment.

If i use the following:

import plotly.io as pio
pio.renderers.default = "jupyterlab"

The offline HTML includes static plot, however I would very like to have the interactivity enabled. I have noticed that the files differs in size, the static pages are only around 700 Kb whereas when I try to save them as interactive they are about 4 Mb.

Is this not possible in Jupyter lab ? or am I missing something

Solution

  • If you want to be able to have interactivity while being offline, you need to add the plotly.js to the output html. You can achieve that like this:

    import plotly.io as pio
pio.renderers.default='notebook'

    Actually, this should be done by default on JupyterLab (you can tell be the increased file size. As in your case it will be >4MB). So if that doesn't work, I suspect a bug. I think I've experienced something similar. Here's my browser console output when using your example and exporting it to html:

    Screenshot displaying browser error when loading plotly

    For some reason, the included plotly.js seems to depend on require.js which is not included in the html export for some reason. Instead, your page will try to load it from a CDN which fails when you are offline (as seen in the screenshot).

    Now, what you can do is to manually include a local version of require.js. Get a copy here. Then, in your Notebook add the following at the top:

    %%HTML
<script src="require.js"></script>

    Then, export your notebook to html. Make sure, it is in the same folder as the require.js file you downloaded before and open it in the browser.
    There should be no more error message in the console and your chart should appear and work interactively:

    Screenshot showing plotly chart working using solution

    /e: If you want to share your notebook, this might be sub optimal as it requires you to also distribute the require.js script. You can also directly include the whole script in your notebook. Just put the %%js cell magic at the top of a code cell and paste the content of the require.js file you downloaded below that.