Plotly Charts Display in Google Colab

Python
Visualization
Tips
How Plotly render inside Colab and in the browser after exporting notebook to HTML.
Author

Pinn Xu

Published

October 7, 2025

4 min read · 615 EN words · 0 中文字

1 Summary

1.1 Problem

After editing an ipynb file in Google Colab and exporting it to HTML, the Plotly charts fail to display.

1.2 Solution

After testing, in Google Colab the ipynb file 1 behaves as follows:

  • fig.show() displays the chart correctly.
  • fig.show(renderer="notebook_connected") fails to display the chart.

But once exported to HTML 2 and opened in a browser:

  • Charts generated by fig.show() fail to display.
  • Only charts generated by fig.show(renderer="notebook_connected") display correctly.

So when editing a notebook in Colab, use the default renderer (fig.show()), and switch the renderer to "notebook_connected" right before exporting to HTML.

In Colab

In Colab

Exported HTML

Exported HTML

1.3 Notes

After editing an ipynb file in Colab, if you want to export it to HTML, be sure to press Ctrl+S first (saving to Google Drive) so that you export the most recently saved version. If you run the export command without saving first, the exported HTML may not be the latest version, and it may even have missing content or other issues.

Recommended workflow:

  1. Finish editing the entire ipynb file.
  2. Choose Runtime → Restart and run all.
  3. Press Ctrl+S to save the notebook.
  4. Run the code below in another notebook to export the HTML.
%%shell
jupyter nbconvert --to html /content/drive/MyDrive/path/filename.ipynb

Tip

%%shell is a cell magic of Google Colab ( %%bash in Jupyter ) used to run shell commands within a code cell. For a single-line shell command, you can also use !, such as !pip install pyvis.

Back to top

Footnotes

  1. IPYNB file: View the demo file in Colab or download it↩︎

  2. HTML file: View the demo file in the browser or download it↩︎