Customizing your long table

Once you have uploaded your dataset into Datawrapper and selected the long table, you might want to work on its appearance. Let us show you how to make a beautiful table in three simple steps.

Because it is tempting to create really big tables, here are the limitations of long tables: Keep in mind that the width of a table should not exceed certain limits, e.g. not have more than 5-7 columns. This is not a limitation of Datawrapper, but of the available width in a webpage and specifically the width of a mobile screen. Should you have that much information that 4-7 columns are not enough we would recommend to split your table in two or even three and focus on certain aspects in each of the tables. 

This guide will walk you through the steps necessary to create a long table as seen above. We will go through three tabs in step 3: Visualize to do so: "Refine", "Annotate" & "Design". (In the "Refine" and "Annotate" tab, you can resize the chart, to make it wider or taller. To do so, click, hold, and drag the arrow in the lower right corner to scale the chart window.)

1

Refine

After clicking on the tab "Refine", you can make the following decisions: 

  • Sort table by: Here you can decide by which column the table should be sorted the first time your readers see it. Choose a column that will be either most helpful or  interesting  to the reader. 
  • Sort ascending: By default, Datawrapper will bring the highest values to the top of the table. If you want to see the lowest values at the top, choose this setting.
  • Make columns sortable: Here you can enable readers to sort the columns by themselves. To do so, they need to click on the header. A small triangle will indicate that this column is sorted.
  • Display content over multiple pages: This will turn on a pagination for your table – which makes sense when you have more than approximately 20 rows. Your table will be more compact and still contain all the information. 
  • Show filter: Especially if you decided to "display the content over multiple pages", this is a really helpful feature for your readers. Turning it on will display a little search field in the upper right of your table, where readers can quickly search through the data; in our case for example for companies they know.
  • Hide header row: If your data is self-explanatory, you can hide the header row. Note that your readers won't be able to sort the columns. 
  • Header color: Choose the background color of your header. Click on the color: A small popup will open, and you'll be able to choose a new color. We choose a dark purple for our header, so Datawrapper automatically made the text color white.
  • Responsive table: Should the table be responsive; meaning, even readable on smaller screens? 
  • Replace country codes (e.g. :us:) with flag icons: Here you can decide to display little flag icons in the table. That only works if Datwrapper finds indicators like :us: in your data. Find more information about flag icons in tables in this article.

For our table, the "Refine" tab settings look like this:

After working through the tab "Refine", we continue with the tab "Annotate":

2

Annotate

Describe chart

If you've created a Datawrapper chart or map before, you already know this feature. Here we can give your chart a title, a description, add notes and a source:

  • We recommend using the title to tell your readers what's interesting about this chart – the one key statement that you want to show on this chart, e.g. "Unemployment highest in the south"
  • The description should have as much information about the data as possible: What do we see exactly? E.g. "Unemployment rates in % in all US states, 2016"
  • Think of notes as footnotes, where we want to specify any abnormalities about your data. E.g. "California unemployment rates from Jan and Feb 2016 not included in the calculation."
  • The source name will give our readers information about how trustworthy our data is. Does it come from a government institution or another trustworthy organization? The source URL lets our reader dig even deeper and have a look at the underlying data themselves. Both, source name and source URL, should be filled out on every map to increase transparency. E.g. US Bureau of Labour Statistics, August 2017

Highlight elements

In the 2nd panel in the "Annotate" tab, we can emphasize certain columns with a background color, like you can see in the table at the top. To do so, select the element(s) you want to highlight. 

You can remove the elements with clicking on the "x" in the blue bars. 

After working through the tab "Annotate", there's only one tab left: "Design":

3

Design

In this last tab, you can select a preset layout and enable social sharing functions to spread your work. Click on " Publish" and you'll be directed to the "Publish & Embed" page.

The best way to use a Datawrapper chart is by embedding it directly in your website. To do that, click the big blue button that says " Embed chart on website". Then, copy & paste the embed code snippet into your website or CMS. You can also download your chart as a PNG or PDF by upgrading to a paid Single or Team account. Click here for more information on the different pricing plans of Datawrapper.

Still need help? Contact Us Contact Us