How to add bar charts, column charts & line charts to tables

When you think of tables, you might think of showing numbers "as they are", in a non-visual way. With our tables, you can do that – but you can also combine that with the benefits of visualizing data, to intuitively show trends, patterns, or to compare numbers. Our tables let you visualize data in three ways: As bar charts, column charts, and as line charts. 

In the following tutorial, we'll explain how to add each to your table. The end result will look like the table below. We recommend you read these articles for creating and customizing tables if you haven't already.

How to add bar charts

Changing a column from regular numbers to bar charts lets your readers better compare these numbers. The visual reference makes it easier for our brains to understand how those numbers compares to the ones around it. 

In order to turn a column into bar charts, make sure you are step 2: Visualize, in the Refine tab. Then choose the column you'd like to transform and toggle the button Show as bar chart. 

From there, you have a few styling options:

• Bar style: Choose between either regular or slim. If slim, text will appear on top of the bar. 
• No background: If this box is unchecked, a gray bar will fill the remainder of the cell.
• Color bars based on categories: Toggle this option to select a column with categories (e.g. continents) to color the bars on.
• Bar color: The left box allows you to change the color of the bar for positive values and the box on the right labeled "neg." allows you to change the bar for negative values. (If you don't have any negative values, this color won't appear in your chart.)
• Range: Range allows you to change the lower and upper limits for your bar chart. If you have negative numbers, but you want your chart to start at 0, set the min value to 0. Setting a max range will give your bar chart a maximum value. For example, if you set the max value to 100, and the value in the cell is 50, the bar will take up 50% of the space.

If you want to extend the width of your bar charts, select Fixed column width to give your bar chart a minimum size. Don't forget to test how these settings look like on mobile, with a click on the little icon below the table that looks like a mobile phone.

How to add line charts = "sparklines"

Tiny line charts – also called "sparklines" – were developed by Edward Tufte in the early 1980s. Sparklines are very small line charts drawn without axes or coordinates. They are intended to be succinct, memorable, and located where they are discussed. They are especially good for showing change over time, and how a set of data got from point A to point B. In our example, the sparkline shows how the life expectancy changed each year starting with 1960 and ending with 2017. 

Sparklines do not have hover tooltip capability, and only show the number for the start and endpoint (which is even optional). 

The first step in creating a sparkline column for your table is to prepare and upload data that can be represented using sparklines. In our example, each year from 1960 to 2017 has its own column of data. 

The next step is again on the Refine tab of the step 2: Visualize.

In order to create your sparkline, select a group of columns by clicking on the beginning column, holding shift, and then clicking on the last column. This will highlight everything in between.

Once you have more than one selected, the button  Show selected columns as tiny charts will become available. Click the button, and a column showing the sparklines will be added to your table. 

Now you have several sparkline settings choices:

• Type: This should be set to "Line".
• Fill area under line: To let every sparkline start at zero, turn on this option.
• Label first/last value: To not show the first and last value on the sparklines anymore, turn off this option.
• Format: This defines the number format of your sparkline values, if turned on. To learn more about number formats, head over to our article "Number formats you can display in Datawrapper".
• Color, stroke, height, and range: While color and stroke are relatively straightforward, height has a big impact on the way the cell is displayed. A larger height gives your sparkline higher highs and lower lows. A small height will make the sparkline smoother. You can adjust this setting depending on how much space you have and how variable you'd like your sparkline to be. Setting a range makes all of the cells use the same values for the y-axis. If these settings are left blank, the sparkline will take up all the space in the cell. You may see more variability with no min or max range. 
• Title: Change the header text for the sparkline column.  

How to add column charts

While line charts don't necessarily need to start at zero, bar charts always do. Like sparklines, our column charts do not have hover tooltip capability, and only show the number for the start and endpoint (which is even optional). But unlike sparklines, bar charts can't show the first or last value.

Creating column charts in tables is very similar to creating sparklines – learn how to do so in the article section above this one. Here's a GIF showing the process:

Now you will be able to choose some column chart settings:

• Type: This should be set to "Columns".
• Color: The left box allows you to change the color of the columns for positive values and the box on the right labeled "neg." allows you to change the columns for negative values. (If you don't have any negative values, this color won't appear in your chart.)
• Height: A larger height gives your column chart higher highs and lower lows. A small height will make the column chart smoother. You can adjust this setting depending on how much space you have and how variable you'd like your column chart to be. 
• Range: Setting a range makes all of the cells use the same values for the y-axis. If these settings are left blank, the column chart will take up all the space in the cell. You may see more variability with no min or max range. 
• Title: Change the header text for the column with the column chart.  

In this article, we've learned how to create bar charts, sparklines and column charts in Datawrapper tables. If you still have questions, don't hesitate to get in touch with us.