How to embed visualizations in Wordpress articles

In this article, you'll learn how to embed interactive, responsive Datawrapper charts, maps & tables into WordPress articles. This works both for self-hosted WordPress installations and for sites hosted on WordPress.com. Here's the difference: 

  • WordPress is a free, open-source content management system (CMS) software that everyone can download & install to build their own blog or website. You can find it at wordpress.org.
  • 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 have two options: 

First, 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. 

❌ Don't simply paste the Datawrapper URL (like https://datawrapper.dwcdn.net/TNscZ/6/) into your editor without having the plugin installed. It will look like it worked, but your visualization won't be responsive – so your chart, map, or table might be cut off on certain devices.

Embedding charts on WordPress.com sites

To embed responsive 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.

❌ Don't simply paste the Datawrapper URL (like https://datawrapper.dwcdn.net/TNscZ/6/) into your WordPress.com editor without having the plugin installed. It will show your visualization, but it won't be responsive – so your chart, map, or table might be cut off on certain devices.
❌ Don't simply paste the Datawrapper embed code into your WordPress.com editor. WordPress strips away the Javascript part of the responsive embed code that ensures that your visualization is responsive. You will see your visualization, but again, it won't be responsive.

The only way to display responsive Datawrapper visualizations on WordPress.com sites is to get the Datawrapper oEmbed plugin first. 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 simply 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