How to embed charts in Wordpress articles

In this article, you'll learn how to embed interactive, responsive Datawrapper charts, maps & tables into WordPress articles. This works for both WordPress.org and WordPress.com installations. 

  • WordPress.org is a free, open-source content management system (CMS) software that everyone can download & install to build their own blog or website. 
  • WordPress.com is a commercial platform that runs on a modified version of WordPress. WordPress.com hosts your blog or website, so you don't need to deal with installing it on a server yourself. 

Embedding charts on sites built with WordPress.org

If you or your organization self-host WordPress, you can embed Datawrapper charts, maps & tables with the normal embed code. So if you see the option to add HTML code to your posts, simply copy & paste the "Responsive iFrame" embed code into your site's HTML. Then, the interactive Datawrapper chart will appear automatically. (You might need an additional plugin for handling embeds.)

You can also use the WordPress Datawrapper plugin that we explain in the next part:

Embedding charts on WordPress.com sites

To quickly embed Datawrapper visualizations on WordPress.com, you'll first need to install the Datawrapper oEmbed plugin. Please note that you need a WordPress.com Business plan or up to install plugins. 

To do so, log in, then go to My Site > Tools > Plugins and search for "Datawrapper": Click on the result, then "Install now" or "Activate". Now you successfully installed the Datawrapper oEmbed plugin.

To embed your article on your WordPress site, publish your final chart, map or table in step 4: Publish & Embed. To publish, click the big blue button here that says "Publish chart". Once the graphic is published, you get some Share & Embed options. 

To embed a chart into your WordPress article, we can either take the "fullscreen" or the "normal size" link. 

Now you'll need to copy the link URL – either directly, or click on it and then copy it  from your browser address bar:

Next, go to your WordPress article. Add a new paragraph and simple  paste the link you just got from Datawrapper. 

And that's it! You got a chart in your WordPress article:

If your chart, map or table doesn't seem to be interactive yet, this is just because the article is still in edit mode. Once you publish your article, you will be able to search in tables, hover over data points, etc. 

To see how your article and the chart will look like once it's published, click on Preview in the top right:

Datawrapper charts are responsive: Try to resize your browser window, and you will see that the charts adapt to the new size and are still beautiful & readable.

Related Articles