- Published on
Adding Plotly Charts to Markdown
- Nelson Tang
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.
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:
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