Show Sidebar Hide Sidebar

How to Embed Graphs in a Blog or Website

Embed graphs created with Chart Studio

Step 1

Embed Chart Studio Graphs in a Blog or Website

When you embed a Chart Studio graph, it means you’re sharing your graph, your data and the code that describes your graph all in one place. You can embed any Chart Studio graph. The embedding process is the same whether you're creating graphs from the online workspace or using one of Chart Studio's APIs. With our interactive features, your readers have a whole new way to engage with your work. When you update a Chart Studio graph, the graph automatically updates on your blog or website. No need for manual updates!

We’re in Wired Magazine, The Washington Post, and the National Post.


You can embed a Chart Studio graph using HTML code or an iframe. These codes are located in Chart Studio's workspace, your list of files, also called your 'Organize', and your Profile page. It's also possible to share someone else’s graph, so keep reading to find out more. If you’re using, jump to the end of this page.

Step 2

From Your Workspace

To share a plot from your own workspace, go to SHARE on the left-hand side.

Workspace share option

The Share popup will display a link that you can add to a website and you have the option of embedding your plot as an HTML snippet or iframe. You can embed a public plot and everyone will be able to view it. Embedding a private plot means you and your collaborators will be able to see it. If you embed with a secret link, those that have that link will be able to see the plot. When you embed a private plot but don't add any collaborators, only you will be able to view it.

Sharing options

Step 3

From Your Organize

To share your own graph from your Organize, hover over your plot and click on the arrow icon. This will display the same Share popup as in the workspace where you'll find the embed codes.

Share from the Organize

Step 4

From Your Profile

Next is if you'd like to embed from your Profile page. You can get there by typing this URL:'' into your address bar, or by going to your username on the top right-hand side of Chart Studio's pages and selecting 'Profile' from the dropdown menu. Just like in your Organize, hover over the plot, but this time click on the Share icon to view the same Share popup.

Sharable link

Step 5

Share Another User's Plot

If you happen to be in Chart Studio's Feed and see a cool graph you want to share, click on the 'Sharing Link' at the bottom right-hand side of the plot.

Embed button

You can also share someone else's graph from their Viewplot, via their Shareable Link. If you don't happen to have this link, but do see their plot (in Chart Studio's Feed, for example), hover over the plot and click VIEW. Notice the sharing options located in the bottom right corner; click on the '</>' button.

Embed button

Step 6

Embed Grid

We've talked a lot about embedding Chart Studio graphs, but did you know that you can also embed your grid? Just like your plots, grids can be embedded in iframes.

You can find the embed code by going to your Organize or Profile page and hovering over the saved grid. Grids are saved as 'Private' by default, so it's important that you save your data as 'Public' or 'Private Link'.

Copy the iframe just as you would for the plot and paste it to your website or blog. This is an example of what your grid looks like when it's been embedded.

Embed grid

Step 7

Embed the div

Simply copy and paste the HTML snippet into your website or HTML application.

Final embedding code

If you need an iframe, feel free to use the example below. You’ll have to replace the URL of our graph with your own.

iframe code 1

If you are using a secret link with a private key, update the private link to include '.embed' before the '?share_key' term. Here's an example:

iframe code 2

You can control the width and the height of the iframe by adding 'width' and 'height' keywords into the HTML.

iframe code 3

The graph will autosize in the iframe container.

Step 8

Customize the iframe

You can add these URL query parameters to further customize the iframe.


Step 9

Add the Code to Your Website

Copy the HTML snippet or iframe and paste it into your site's source code. For our example, we'll add a graph to our Chart Studio blog hosted by tumblr. We're going to add the HTML snippet just the way it is, but sometimes you'll find that the image needs to be resized. We’ve found trial and error is best.

How to embed plotly graphs in websites

This is how it appears after it's been posted.

Live embedded image

Step 10

Embed on WordPress

WordPress doesn’t support our HTML code or iframes, but we’ve come up with an easy solution for you. We developed a WordPress plugin which makes it easy to embed Chart Studio graphs direct from WordPress's admin.

Don't forget to check out our WordPress blog called Modern Data!