Embed Plotly Graphs in A Blog or Website
When you embed a Plotly graph, it means you’re sharing your graph, your data and the code that describes your graph all in one place. With our interactive features, your readers have a whole new way to engage with your work. When you update a Plotly graph, the graph automatically updates on your blog or website. No need for manual updates!
|Plotly’s interactive charts add impact to your blog, webpage, online notebook, IPython notebook, and lesson plans: we’re in Wired Magazine, The Washington Post, and the National Post.|
You can embed a Plotly graph with using HTML code or an iFrame. We show you how to paste the HTML code in your website or blog in Step 2 below. Finally, if you’re using wordpress.com, jump to the explanation below. WordPress doesn’t support our HTML code or iFrames, but we’ve come up with an easy solution for you.
Step 1: Get the HTML snippet
There are three places to locate the embed code in Plotly. If you want to share someone else’s graph, option 1 is the easier choice. If you’re in your own Workspace, then you’ll want to check out option 2. To share from a folder, for example Home, within the Organize app, select option 3.
|This option is for sharing someone else’s graph, as seen on the right.|
|Notice the sharing options located in the bottom right corner. You want to click on the button </> .|
|To share from your own workspace, click the Share option in the top right of your browser window.|
|In the Share Plot popover that opens, click on the Embed </> button. You’ll need to make sure that the graph is set to “public” in order to generate the HTML code.|
|To share your own graph from the Organize app click on the Share button above the Open Plot button.|
|This will bring up the Share Plot popover. As with option 2, click on the Embed </> button. You’ll need to make sure that either the graph is set to “public” OR the Enable private share link option under Sharable Link is checked in order to generate the HTML code.|
|Embed the div in your website or HTML application.|
If you need an iframe, copy and paste the snippet below. You’ll have to replace the URL of our graph with your own.
<iframe frameborder=”0” seamless=”seamless” scrolling=”no” src=”https://plot.ly/~Dreamshot/411.embed”> </iframe>
If you are using a secret link with a private key, update the private link to include
.embed before the
?share_key term. Here is an example:
<iframe frameborder=”0” seamless=”seamless” scrolling=”no” src=”https://plot.ly/~chris/15989.embed?share_key=V6QnmguC5YHwziynBv8NJR”> </iframe>
You can control the width and the height of the iframe by adding
height keywords into the HTML:
<iframe width=750 height=500 frameborder=”0” seamless=”seamless” scrolling=”no” src=”https://plot.ly/~Dreamshot/411.embed”> </iframe>
The graph will autosize in the iframe container.
You can add these URL query parameters to further customize the iframe:
||layout.autosize in chart is forced||https://plot.ly/~Dreamshot/411.embed?autosize=True|
||Plotly “Edit chart” link is hidden||https://plot.ly/~Dreamshot/411.embed?autosize=True&link=false|
||Plotly toolbar is hidden||https://plot.ly/~Dreamshot/411.embed?autosize=True&modebar=false|
||Tool bar shows, but Plotly logo does not||https://plot.ly/~Dreamshot/411.embed?autosize=True&logo=false|
||Set chart width within iframe||https://plot.ly/~Dreamshot/411.embed?width=100%|
||Set chart height||https://plot.ly/~Dreamshot/411.embed?height=650|
Step 2: Paste the HTML into your site’s code
Paste the HTML code into your site’s source code, and resize as needed. At Plotly, we use (tumblr)[http://www.tumblr.com] for our blog . Our post on lines of best fit has several graphs embedded. Here’s the snippet we used for the first chart in that post. You might need to resize — we’ve found trial and error is best.