How to make articles with Datawrapper embeds print nicely

When you print web pages with Datawrapper charts, you may notice that the charts don't print nicely–missing background colors, labels, etc. This article will explain how to solve this issue by using fallback images. 

What causes this issue? 

This issue occurs because the browser print functionality simply doesn’t fully support the correct printing of all display features in embedded graphics. And there's not much we can do at Datawrapper to change that. A recommended workaround would be to instead use fallback images in the place of the iframe embeds in the printed pages.

How to set up fallback images on your web page

1

When embedding charts, including both the regular <iframe> embed, as well as an <img> embed, that displays a static image of the chart. That’s actually quite easy since whenever you publish a chart, a static image of it automatically gets published too. For example, if you have a chart where this is the URL:

https://datawrapper.dwcdn.net/JhohO/1/

Then the image URL would be:

https://datawrapper.dwcdn.net/JhohO/full.png

You can see it’s almost identical to the chart URL, except at the end, instead of the version number, it has full.png

There are a few ways you could streamline this process:

  1. You could create a custom embed code that includes the iframe and the image
  2. You could see if it was possible for something to be implemented programmatically in your CMS so that when the article is generated, images get automatically inserted after each Datawrapper embed 
2

You would then need to make two adjustments to the CSS styles that are applied to the articles on your site:

  1. Ensure the fallback images are hidden when viewed on the web
  2. Ensure that the fallback images are shown and the iframe is hidden in the print styles. This can be done by setting specific CSS for @media print

Here's a proof-of-concept, to demonstrate how this could work. Here you can find the code, and here is the output. 

If you have any questions, reach out to support@datawrapper.de.