vscode-jupyter: Plots not shown in HTML export for default Plotly renderer

Environment data

VS Code version: 1.59.0
Jupyter Extension version (available under the Extensions sidebar): v2021.8.1195043623
Python Extension version (available under the Extensions sidebar): v2021.8.1105858891
OS (Windows | Mac | Linux distro) and version: Windows 10 20H2
Python and/or Anaconda version: 3.9.5
Type of virtual environment used (N/A | venv | virtualenv | conda | …): NA
Jupyter server running: Local

Expected behaviour

Plots are visible when exporting to HTML

Actual behaviour

Plots are not shown (and there is no track of it in the HTML source code)

Steps to reproduce:

import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
fig.show()

The temporary notebook for exporting (%localappdata%\temp<UUID>\export.ipynb) already misses the expected output.

Switching the Plotly renderer to notebook using fig.show(renderer='notebook') provides the expected plot output in the exported HTML

On a side note, the iframe / iframe_connected renderer types don’t produce any plot output in VS Code but the export to HTML works as expected. It seems that iframes are not working/are not supported in VS Code right now (it has worked a while back) - maybe worth another bug entry.

Export to PDF probably has the same issue - not checked.

Logs

Output for Jupyter in the Output panel (View→Output, change the drop-down the upper-right of the Output panel to Jupyter)

XXX

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 8
Comments: 22 (8 by maintainers)

Most upvoted comments

~The best~ (EDIT: another) workaround I’ve found is to enable multiple renders in Plotly. With the snippet below, I see a single interactive plot in both the VS Code UI and exported HTML.

The Plotly docs suggest that enabling multiple renderers is the intended solution, although it would be nice if it just magically worked by default.
The main downside (if you commit ipynb files to Git) is probably that this bloats the ipynb file, but I’m using the Jupytext for Notebooks VS Code extension to automatically strip outputs.
- Actually I’m using a fork ofteh extension with some tweaks I’m trying to upstream.

import plotly.express as px
import plotly.io as pio

# This ensures Plotly output works in multiple places:
# plotly_mimetype: VS Code notebook UI
# notebook: "Jupyter: Export to HTML" command in VS Code
# See https://plotly.com/python/renderers/#multiple-renderers
pio.renderers.default = "plotly_mimetype+notebook"

fig = px.line(...)
fig.show()

+15

congyiwu on Sep 22, 2021

~The best~ (EDIT: another) workaround I’ve found is to enable multiple renders in Plotly. With the snippet below, I see a single interactive plot in both the VS Code UI and exported HTML.

The Plotly docs suggest that enabling multiple renderers is the intended solution, although it would be nice if it just magically worked by default.

The main downside (if you commit ipynb files to Git) is probably that this bloats the ipynb file, but I’m using the Jupytext for Notebooks VS Code extension to automatically strip outputs.

Actually I’m using a fork ofteh extension with some tweaks I’m trying to upstream.
import plotly.express as px
import plotly.io as pio

# This ensures Plotly output works in multiple places:
# plotly_mimetype: VS Code notebook UI
# notebook: "Jupyter: Export to HTML" command in VS Code
# See https://plotly.com/python/renderers/#multiple-renderers
pio.renderers.default = "plotly_mimetype+notebook"

fig = px.line(...)
fig.show()

Thank you SO MUCH for this!

mikayla-eckelcifrese on Jun 24, 2022

Running nbconvert directly using py -m jupyter nbconvert notebook.ipynb --to html --output notebook.html reveals:

..\nbconvert\filters\datatypefilter.py:39: UserWarning: Your element with mimetype(s) dict_keys(['application/vnd.plotly.v1+json']) is not able to be represented.
  warn("Your element with mimetype(s) {mimetypes}"

It looks like nbconvert doesn’t like the Plotly mime type + json format that is generated with renderer='vscode'. There are some tracks of it in https://github.com/jupyter/nbconvert/issues/944. JupyterLab appears to use a Plotly extension to convert the mime type to static images. Not sure if VS Code should support something similar. Right now the notebook renderer(s) seem to provide the only option to export Plotly graphs to HTML from within VS Code.

jackthepanisher on Aug 12, 2021

@jackthepanisher Is this export to HTML from the interactive window or from a notebook?

@joyceerhl the behavior is the same for notebook and interactive window. I can also mix multiple fig.show(renderer='vscode') and fig.show(renderer='notebook') statements where plots are shown for both cases in the notebook/interactive window but only the renderer='notebook' one shows up in the HTML export.

Note: fig.show(renderer='vscode') is the default setting in VS Code i.e. same as fig.show()

jackthepanisher on Aug 10, 2021