Datawrapper becomes

mobile-first charting tool.

New features simplify publishing charts to small screens.

For most media outlets, smartphone readership has now outgrown readership on traditional desktop or laptop computers. As of November 3, 2016, Datawrapper launches 3 updates to make all charts mobile-first by default:

Instant Smartphone & Desktop preview
With one click, you can compare how your chart will appear on mobile devices and on Desktop computers.

This is helpful to check how the chart will actually look for mobile users (often the majority of your readers, at least for news sites). For most charts it is just a quick check of quality, from a the users perspective. For some charts with very long legends, etc. you can check whether this actually works well on mobile. 

If not, consider shortening long legend and descriptions texts. Sometimes creating two or even more charts to show a specific aspect helps if your one chart shows too much information. 

No more gaps or scroll bars
Your charts automatically extend to the correct height when you embed them. There’s nothing to scroll for your users, and there’s no gap below the chart and the remaining article.

By setting correct sizes automatically we are now avoiding that in-between sizes result in scroll bars shown around the chart. The charts will re-align with the embed page to minimize a potential gap between the embed chart and the text, for a better layout. 

Fully responsive: Charts automatically adapt and optimize when viewed on mobile devices
As an example, Datawrapper line charts switch from direct labeling to legend-based labeling, and sharing buttons are displayed vertically to save precious screen real-estate.

How does this look in the application?

The only visual change are three viewports added to the chart preview in step 3 of the workflow (Visualize).  Look at the picture below where on the right side of the chart you see three new buttons: Mobile (S), Mobile (L) and Desktop. Simply click here to preview your chart. Datawrapper will handle the changes automatically. 

E When the chart width changes to mobile the legends which are at the end of the lines for big displays change into a short legend on top of the chart. 

Example 1: Large screen size - legend at end of line chart

Example: Small screen size - legend on top of chart

There’s nothing you have to do or change to activate these updates. They will be applied as default for all charts published with Datawrapper. 

Other Interesting Tutorials

How to create a Stacked Column Chart

Learn how to create a stacked column chart in minutes with Datawrapper.

View Guide

All-new line charts

Datawrapper has completely revamped line charts: More responsive, cleaner and with annotations.

View Guide