Datawrapper visualizations are great for embedding on the web. Just copy the embed code, insert it in your page and your beautiful chart, map or table will be there for readers.
But maybe you’re using software where you can’t just embed an
iframe. Or you need a preview image for your social media post. With our new “Image Publishing” feature for users on a Custom or Enterprise plan, you can configure Datawrapper to automatically generate images of your visualizations whenever you hit publish.
How to set up Image Publishing
To set up Image Publishing, go to your account settings in Datawrapper and select your team to get to your team settings. Now click on “Images”. Here you can configure which files will be created automatically whenever your team publishes a visualization.
Datawrapper will always create three default PNG images. But the real power comes from defining your own custom formats, which you can do by clicking on “Add static fallback format”. Add a filename, choose a size and a filetype (PNG, SVG or PDF).
If your image shouldn’t include the footer and header of your visualization, select “Just Visualization”. Then click save – and that’s it! Publishing a chart, map or table will now create the additional images you defined.
You can find the generated images in the same place as your visualization. Its URL looks like this one:
Remove the version number (
8) from the URL, add your filename with extension and you should see the created image in your browser:
Example Image URLs of chart "M5I3Y"
You can download the images with your browser or directly link to them.
PDF of the chart with the ID
M5I3Y, automatically generated by Datawrapper when the chart is published.
What to use Image Publishing for
There are a lot of ways how to use this new feature. All of them will reduce the need to manually export your chart, map or table. Here is a list of some use cases:
Newsletters and RSS feeds
Email newsletters and RSS feeds don’t support embedding of
iframe elements, but if your article references a visualization it would be odd to not include it. With Image Publishing, you can generate a fallback image for these cases:
Fallback image in an RSS reader, showing one of our blog posts.
Let’s say you wrote an amazing article with a Datawrapper visualization embedded and want to promote it on your Twitter or Facebook profile. A post with an image is usually better for engagement, and now you can use Image Publishing to generate automatic preview images for your links.
Thumbnail images inside your CMS
You can set up an integration with Datawrapper’s API to display a list of your team’s Datawrapper visualizations directly in your content management system (CMS), similar to what you can see in “Team Charts” on Datawrapper. This can make it super simple for editors to write an article and find the correct visualization without ever leaving your CMS.
A tiny FAQ
I published a visualization, but the images are not at the URL. Why?
By default, the images are created after your chart, map or table is published. That means you can embed the chart already, but the images might not be ready yet. If you need the images at the same time as the embed code, click on the checkbox that says “Wait for image generation during visualization publishing”.
This increases the time to publish a visualization – but you can be sure that when your embed code is ready, your images will be ready, too.
I set a fixed height and now the chart image is cut off in the middle. How can I fix this?
Not all visualizations will fit into a fixed height. A bar chart with four bars might fit into a 2:1 social media image; a bar chart with 20 bars won’t. Set the
height setting to
auto and Datawrapper will generate an image with the correct height for your chart.
I have used images on
img.datawrapper.de in the past. Do I need to switch?
Yes, we recommend you to switch to
datawrapper.dwcdn.net. We transferred all your published visualization files from
datawrapper.dwcdn.net already. This way, you don’t need to remember two locations - your charts and images are now in one place.
img.datawrapper.de will still work for some time, but if you can, simply use the new URLs.
But wait, there’s more
If you take a closer look at the team settings, you’ll see we added quite some new features in the last weeks & months. Here’s what you might have missed:
- Set a default folder (e.g. “drafts”) for all team charts to get created in. You can also decide on a default design theme, default locale and default embed code. Works on any plan, including the free one. Learn more here.
- Create a custom embed code that works best with your CMS. You can use placeholders like
%chart_height%. Works on any plan, including the free one.
- Connect with Slack or Microsoft Teams to be notified in a channel of your choice whenever a chart created by your team is published or updated. Works on any plan, including the free one. Learn more about the Slack integration here or about the Microsoft Teams integration here.
- Add custom fields to the Annotate tab (below “Title”, “Description”, etc.) to capture additional metadata. These values can then be retrieved through the API, or used in custom embed codes. Works on a Custom or Enterprise plan.
- Disable visualization types (e.g. pie charts) for your team. Works on an Enterprise plans. Learn more here.
We hope these feature wiill be of big help for your visualization production workflow. Do you have feedback, questions, or hints? Write to us at firstname.lastname@example.org. We’re always happy to hear from you.