How to Embed Plotly Images as HTML Iframes

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.