CODEWITHSUNDEEP
jupyter-notebookplotlyipythonjupyter-labnbconvert
Enrico88
Enrico88

Reputation: 31

Output of plotly to_html() method is not displayed in Jupyter Notebook

When creating an html from a plotly plot using the to_hmtl method, the generated html can be displayed correctly using display(HTML(x)) when using JupyterLab but is not displayed correctly when using Jupyter Notebook (nothing is displayed).

Also, when trying to export the Jupyter Lab notebook to hmtl using nbconvert, the plotly plot are not correctly shown in the generated html (although they are rendered correctly in the JupyterLab Notebook)

Python Code

# Import libraries
import plotly.graph_objs as go
from IPython.display import HTML, display

# Sample data
x = [1, 2, 3, 4, 5]
y = [1, 4, 9, 16, 25]

# Create trace and figure
trace = go.Scatter(x=x, y=y)
fig = go.Figure(data=[trace])

# Generate html figure
html_fig = fig.to_html()

# Display the html figure (Works in JupyterLab. Does not work in Jupyter Notebook)
display(HTML(data=html_fig))

Terminal Code to Convert Notebook to html
jupyter nbconvert --to html PlotlyToHtml.ipynb

Versions

What I tried (without success)

  1. Explicitely set pio renderer
    Set the pio renderer to "notebook" (and all other available renderer types) at the beginning of the jupyter notebook as suggested in some older posts
import plotly.io as pio
pio.renderers.default="notebook" # jupyterlab, vscode, ...
  1. Wrap html in an iframe
    Wrap the html figure in an iframe as suggested here: https://github.com/microsoft/vscode-jupyter/issues/3654
html_fig_modified = (
    """<iframe sandbox='allow-scripts allow-forms' style='display:block; margin:0px;' frameborder='0' srcdoc='
<!DOCTYPE html>"""
    + html_fig
    + """ />"""
)

HTML(html_fig_modified)
  1. Import holoview to allow exporting with nbconvert
    I tried to import holoview at the very beginning of the jupyter notebook (as suggested here https://github.com/plotly/plotly.py/issues/1033) to see if at least I could see the interactive figures after exporting the html with nbconvert. The exported html still does not render the interactive figure correctly.
import holoviews as hv
hv.extension("plotly")
  1. Set notebook mode to connected
    I try setting the notebook mode to connected as suggested in some posts.
from plotly.offline import init_notebook_mode
init_notebook_mode(connected=True)

Upvotes: 3

Views: 322

Answers (1)

Ian Mullens
Ian Mullens

Reputation: 1

I'm getting the same behavior. I looked at the plotly code and they seem very aware of this. The .show method seems to write a temporary html file and then uses an iframe html code which is displayed to visualize the temporary file.

Upvotes: 0

Related Questions