The Datawrapper Developer Hub

Welcome to the Datawrapper developer hub. You'll find comprehensive guides and documentation to help you start working with the Datawrapper API as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Google AMP

Datawrapper visualizations can be embedded in Google AMP articles, and display correctly on devices of all screen sizes. To do that, you need to ensure that your website's AMP markup follows the official guidelines for resizable iframes in AMP. Here's an example of a Datawrapper embed in AMP:

<amp-iframe
  width="100%"
  height="500"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin"
  resizable
  src="https://datawrapper.dwcdn.net/bdqZJ/2/">
  
  <div overflow tabindex="0" role="button" aria-label="View more">
    View more
  </div>
</amp-iframe>

Let's break down the parts of this embed code:

  • The amp-iframe tag indicates that this piece of code embeds external content.
  • The src attribute contains the URL of your published chart.
  • The height attribute corresponds to the height that will initially be set to display the chart. However, the chart will resize itself if needed to avoid scroll bars or whitespace, so you can set this to a fixed value.
  • The amp-iframe must be defined with the resizable attribute for the responsive display to work correctly.
  • The amp-iframe must have an overflow child element.
  • The amp-iframe must set the allow-same-origin sandbox attribute.

The AMP standard requires the iframed website to send out messages with the desired height of the embed. Datawrapper embeds will do that automatically, and you don't have to set anything up to ensure correct display.

Updated about a year ago

Google AMP


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.