How to Embed Plotly Images as HTML Iframes

o

Note

Use this technique for more advanced charts that cannot be displayed in Plotly’s Chart Studio. It seems like it’s being deprecated.

1. Export plotly figure to HTML

figure.write_html("<path>.html", include_plotlyjs="cdn", full_html=False)

• include_plotlyjs="cdn": Source code will be downloaded from the web on page load. This prevents viewing the chart offline, but keeps page load times low
• full_html=False is a tiny optimization to keep the HTML file smaller

2. Embed HTML within an Iframe

<iframe 
	src="<html-filename>.html"
	width="100%" 
	height="600px" 
	style="border:none;"
	title="Linear Layer Arithmetic Intensity Plot">
</iframe>

Quartz will convert the name (<html-filename>.html) to a relative slug (<html-filename>), similar to how Obsidian [[wikilinks]] work. The CrawlLinks plugin will figure out the slug for that given html file.