Changing the layout of your visualization in the "Layout" tab

No matter if you're creating a Datawrapper chart, map, or table, you will always have the options to change the locale ( language), add/remove the "Get the data" link and other footer options, add social media buttons, and select a different design theme from the Layout tab. 

You will see the option to change all that in the Layout tab in step 3: Visualize:

This article explains what it means to change the  Output Locale, the design theme, the footer options and add share buttons:

Output Locale

In the Output Locale selection, you can choose one of many different languages, like English (en-US), English (en-GB), 日本語 (ja-JP), română (ro-RO) or български (bg-BG). The chosen language has an impact on:

  • Display of decimal and thousand separators. For example, a number will appear as 1,000.00 in an English Locale, but as 1.000,00 in the Deutsch (de-DE) locale.
  • Translation of month and weekday names, like Januar, Februar, März in a German locale and January, February, March in any English locale.
  • Currency sign when choosing the $ placeholder as a part of a custom number format. $ will be displayed as £ in the English (en-GB) locale but $ in the English (en-US) locale. Learn more about $ placeholders here.
  • Translation of footer options, like Map: Jane Doe / Source: UN Data in any English locale and Mappa: Jane Doe / Fonte: UN Data with an Italian locale.

We strongly recommend changing the output locale to the language in which your visualization will be published. Find a list of the more than sixty available output locales in this Academy article.

Layout

In the Layout section, you can decide on a theme. As a free user, you can choose between five themes: 

  • Datawrapper: The theme that's selected by default. It uses the Roboto typeface.
  • Datawrapper (2012): Our old default theme that we introduced in 2012. It uses the Helvetica typeface.
  • Datawrapper (extended charset): Includes Cyrillic, Greek, and extended latin characters (like ž)
  • Datawrapper (high contrast): Usually grey text is made darker, e.g. the footer text, like Source and Created with Datawrapper
  • Pageflow: Has a dark background.

If your team is on our Custom plan and has custom design themes, you can select one of them here. If your organization has just one custom theme, it's selected by default. Learn more about custom design themes here

If your custom theme includes a logo, you can also decide if your logo should appear in your visualization or not (e.g. in the lower right). 

If your custom theme doesn't include a logo, this option won't be visible. If you want to add a logo to your custom theme, get in touch with us at support@datawrapper.de.

In the Layout section, you can also set the dark mode. We cover this in the article How to enable dark mode in embedded Datawrapper visualizations.

Here you can adjust which options should be available for readers of your visualization: 

  • Data download creates a Get the data link in your footer. If readers click on it, they can download your visualized data as a CSV (comma-separated values) file that they can then open with a text editor or spreadsheet software.
  • Image download options let readers download your chart as a PNG with a Download image link in your visualization footer. If your organization has a Custom plan with Datawrapper, you can also customize the downloaded image – e.g. let it show a logo, even if your embedded visualization doesn't show one. As a paid user, you can also create Download PDF and Download SVG options for your readers. Learn more about these Image Publishing options here.
  • Embed link lets readers embed your visualization themselves. When they click on the link in the footer, a little pop-up window opens with the responsive iframe code that they can embed in their own website or article.  

If you're a free user, a fourth, disabled option appears: Datawrapper attribution. You or your organization needs to upgrade to a Custom plan to disable this attribution. You can learn about our pricing options here.

Share buttons

If you enable the Social media share buttons, your readers can share your Datawrapper visualization on Facebook, LinkedIn, and Twitter via buttons in the top-right of your visualizations. 

These buttons can link to any of the following targets: 

  • Share site chart is embedded: If you select this option and people click on the social media share buttons, they will get a pop-up with the pre-filled link to your website or article in which the visualization is embedded, e.g. https://www.your-newspaper.com/three-maps-that-show-where-the-EU-is-heading
  • Share chart URL: Select this option and the social media pop-up will prefill with a link to the Datawrapper preview site of your chart. In the example above, that's
    https//www.datawrapper.de/_/iUPVd/. 
  • Manually enter URL: Here you can enter an URL that will prefill in the pop-up that appears once readers click on the social media share buttons. 

Related Articles