Published on

Adding Plotly Charts to Markdown


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 - 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
import as px

df ="continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color='country')

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


  1. Inspiration from
  2. Plotly Documentation with additional details on html output