- Published on
Adding Plotly Charts to Markdown
- Authors
- Name
- Nelson Tang
- @ThisIsAffine
Quick reference that shows options to add plotly charts to a markdown document. This assumes that your markdown interpreter can handle raw html (like Jekyll or Hugo).
Add raw html output to markdown
Thanks to this article from http://www.kellieottoboni.com - I updated the syntax to use the latest version of plotly because you don't have to fiddle with plotly offline versions anymore.
Steps:
1. Create a Plotly figure object:
# From https://plotly.com/python/line-charts/
import plotly.express as px
df = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color='country')
fig.show()
2. Get HTML from the figure object
Then you want to get the raw html using either the to_html()
method or the write_html
method, with some flags that should honestly be default:
# Output html that you can copy paste
fig.to_html(full_html=False, include_plotlyjs='cdn')
# Saves a html doc that you can copy paste
fig.write_html("output.html", full_html=False, include_plotlyjs='cdn')
These two flags:
include_plotlyjs='cdn'
full_html=False
helps you avoid creating a huge html document and from including 3MB of the plotly javascript stuff - total overkill.
3. Copy and paste directly into your markdown
Note: I've since migrated my blog from Jekyll and Hugo to this new site powered by Next.js and MDX which requires some extra work to make this work.
- Jekyll: When I was using Jekyll, I could paste in the raw html directly into markdown and it would parse it.
- Hugo: Check your Hugo template, but you'll need to use or make a shortcode for raw html, like this example from "Make with Hugo":
Here's the output, copied and pasted into a markdown document
Tested on Plotly 4.14.3
Reference: