exporting matplotlib plots to html when using %matplotlib widget or notebook

[Cube707]

exporting matplotlib plots to html when using %matplotlib widget or notebook

I am sorry if this is a duplicate, but I have read a bunch of other issues and still don't understand if this should work or if it is correct behaviour.

Problem:

I am trying to export a notebook that contains matplotlib plots and using the magic command %matplotlib widget to get interactive plots.
See example:

%matplotlib widget

from matplotlib import pyplot as plt
from math import sin

x = list(range(100))
y = [sin(x) for x in x]

plt.plot(x,y)

Reading this, this way should work and be the desierd way.

Now when exporting to html no images appear in the resulting file. I have tried these commands:

jupyter-nbconvert --to html notebook.ipynb
jupyter-nbconvert --to html --execute notebook.ipynb

Using --execute I get parts of the widget (the buttons), but still not visible image.

This also causes an issue downstream, where the pdf-exporter relies on the html exporter and there for has the same problem.

Possible workarounds:

One could just search and replace all magic commands and rerun. This will produce static images which will export just fine. But I feel like this is an unnecessary step and could be added as a feature.

I personally don't care about the interactive features and could live with just a static image export.

Some more analysis:

The behaviour differs a lot depending on the tools used and in which order, which is part of why I am so confused. It seems like some temporary data
is stored somewhere, and a reboot is needed to get rid of it sometimes. Here are some attempts of untangling this:

• Running %matplotlob widget in VScode, then using jupyter-nbconvert --to html notebook.ipynb
• Running %matplotlob widget in Jupyter Lab and than using jupyter-nbconvert --to html notebook.ipynb
• Running %matplotlob widget with jupyter-nbconvert --execute notebook.ipynb --inplace & jupyter-nbconvert notebook.ipynb --to html

With all of this the output datatype is set to "application/vnd.jupyter.widget-view+json", which seems to be required as described here.

{
    "output_type": "display_data",
    "data": {
        "application/vnd.jupyter.widget-view+json": {
        "version_major": 2,
        "version_minor": 0,
        "model_id": "c4687722682d4bbbb1fad0aa8e6e0d26"
    },
    "image/png": "loads of base64....",
    "text/plain": [
        "Canvas(toolbar=Toolbar(toolitems=[('Home', 'Reset original view', 'home', 'home'), ('Back', 'Back to previous …"
    ]
},

Most of the times this gets some javascript generated and displayes the wiget buttons, but no image. But the image is present as base64, which I assume should work, but doesn't?
Acationally this just doesn't work and has no javascript inside the resulting html file.

• Running %matplotlob notebook in VScode, then using jupyter-nbconvert --to html notebook.ipynb:
  not supported, doesn't work

• Running %matplotlob notebook in Jupyter Lab and than using jupyter-nbconvert --to html notebook.ipynb:
  This is the only instance that works!! A static image gets displayed. This seems to be because there is a <img> tag with base64 present that is used as a fallback:

  "outputs": [
  {
   "data": {
    "application/javascript": [
     "so much JS......."
    ],
    "text/plain": [
     "<IPython.core.display.Javascript object>"
    ]
   },
   "metadata": {},
   "output_type": "display_data"
  },
  {
   "data": {
    "text/html": [
     "<img src=\"bounch of base64.....\" width=\"640\">" //this seems to be what works
    ],
    "text/plain": [
     "<IPython.core.display.HTML object>"
    ]
   },
   "metadata": {},
   "output_type": "display_data"
  },
  {
   "data": {
    "text/plain": [
     "[<matplotlib.lines.Line2D at 0x25824ca5dc0>]"
    ]
   },
   "execution_count": 1,
   "metadata": {},
   "output_type": "execute_result"
  }
  ]

• Running %matplotlob notebook with jupyter-nbconvert --execute notebook.ipynb --inplace and jupyter-nbconvert --execute notebook.ipynb --to html:
  No result is shown. Once again a bunch of JS is generated, but doesn't seem to work inside the html.

  "outputs": [
  {
   "data": {
    "application/javascript": [
     "loads of JS, once again...."
    ],
    "text/plain": [
     "<IPython.core.display.Javascript object>"
    ]
   },
   "metadata": {},
   "output_type": "display_data"
  },
  {
   "data": {
    "text/html": [
     "<div id='ad87f4e9-85ac-493f-b215-f7bbecc29d08'></div>" // this has no imagedata attached
    ],
    "text/plain": [
     "<IPython.core.display.HTML object>"
    ]
   },
   "metadata": {},
   "output_type": "display_data"
  },
  {
   "data": {
    "text/plain": [
     "[<matplotlib.lines.Line2D at 0x1e6ec5d7940>]"
    ]
   },
   "execution_count": 1,
   "metadata": {},
   "output_type": "execute_result"
  }
  ],

[Cube707]

as explained in #1666, this is closed by #1664