Skip to course content
Free data visualization course

Data Visualization and Dashboard Storytelling

Unit 11.03: Exporting an interactive chart that still works

An interactive chart that needs the network will render as a blank page for some readers.

Three export modes, three trade-offs

The same figure exported with the library from a CDN, inlined, and as a static image.

The code reports the sizes.

import plotly.graph_objects as go

fig = go.Figure(go.Scatter(x=[1, 2, 3], y=[100, 108, 115]))

html = fig.to_html(include_plotlyjs="cdn", full_html=True)
inline = fig.to_html(include_plotlyjs=True, full_html=True)
static_note = "requires kaleido; produces a PNG with no interactivity"

print(f"{'export':22} {'size':>10}  works offline?")
print(f"{'html, js from CDN':22} {len(html):>9,}  no -- needs the network")
print(f"{'html, js inlined':22} {len(inline):>9,}  yes")
print(f"{'static image':22} {'n/a':>10}  yes -- {static_note}")

print("\nA CDN export emailed to someone behind a strict firewall renders as")
print("a blank page. Inline the library, or send an image alongside it.")

The CDN export is small and requires the reader's browser to fetch the library. Behind a strict corporate firewall, or offline on a train, that is a blank page.

Inlining makes the file substantially larger and self-contained. For anything emailed or archived, that is the right trade - the file has to work in five years, not just today.

The mistake this prevents

The mistake is testing the export on your own machine, where the library is already cached. Test it in a private window with the network throttled, or send it to someone outside your network and ask.

Takeaway

Inline the library for anything emailed or archived, and send a static image alongside it. A CDN export is a blank page behind a firewall.