Customizing your bar chart

This tutorial explains how to customize the appearance of a Datawrapper  bar chart. We assume that you already uploaded data for your own bar chart or used the sample data from the "How to create a bar chart" tutorial. Customization enables you to make your chart better, through a number of features and options. The first iteration of your chart will probably look a bit rough. Let us show you how to refine this to the following beautiful chart in three simple steps:

We will go through three tabs in step 3: Visualize to change the appearance of our chart:  "Refine", "Annotate" & "Design". 

Before we dive in, in any tab of  step 3: Visualize, you can click, hold, and drag the arrow in the lower right corner to scale the chart window or manually determine the dimension of the chart by entering values in the boxes below the chart ( "Chart Size"). We recommend checking how the chart looks like on different screen sizes multiple times while designing it, by clicking on the little icons (mobile, tablet & computer). 

1

Refine

In the "Refine" tab, we see  four panels: Labels, Horizontal axis, Appearance, Sorting & Grouping

Labels

The first panel lets you choose how you want your labels to look. Do you want to align your labels to the left or right? Display them in a separate line? Show or hide the value labels? Feel free to play around with these settings to see what works best for your data (don't worry, you can't break anything – just uncheck the checkbox again if you're not happy with the setting). 

The most interesting setting here is the  Number format. Here we can decide how our values are shown (if we chose to display them). Here are three examples:

  • Choose the number format "123.4k" if you have big numbers like "1,303,428" that you'd rather want to display as "1.3m"
  • Choose the number format "0.0" if you have very detailed numbers like "0.1922302" that you'd rather want to display as "0.2"
  • Choose the number format "0%" or "0.0%" if you have a number that is a relative number, like in our case. This setting will add a percentage sign. 

If you want a more detailed explanation, you can also read our academy article " Number formats you can display in Datawrapper".

For our chart, the panel looks like this at the end: 

Horizontal axis 

The second panel lets you customize your horizontal axis and grid lines. 

  • Custom range: Here you can decide which value range your x-axis should cover. By default, the y-axis will be as long as your biggest bar. But in our chart we want to show percentages close to 100%, so it makes sense to extend the chart to 100%. Readers will then be able to see how much turnout is "missing" to achieve the ideal 100%. So we can write in a "100" in the "max"-field:
  • Grid lines: You can choose to show verticle grid lines along the x-axis and where to position them. You will see more options when you switch on the "Grid lines" feature. 

For our chart, the panel looks like this at the end: 

Appearance

In the third panel, we can decide the design of our bar chart: We can choose bar colors and decide if we want to separate rows with a line, make our bars thicker or give each bar a grey background.

Let's focus on how to  choose colors for our bars. We can choose one color for all our bars (click on "Base color" to change the default color). When we click on "customize colors", we can choose individual colors for each bar. In our chart, we can give countries with a low turnout a red color and color countries with a high turnout in green: To do so, we can click on the name of a label (e.g. "Romania (2016)") and then click on the color to choose a new color for the bar with this label. 

You can select and give the same color to multiple bars at the same time by highlighting them together. (If you want to highlight multiple items that are listed consecutively, hold down the Shift key while selecting. If the items are not in consecutive order, hold down the Ctrl (Windows) or Command (Mac) key while selecting.)

You can also select colors by clicking on the colored boxes, choose different gradients of the same color or manually enter Hex color codes (e.g. #267C87 is green, #267c8750 is green with 50% opacity).

There is also a way to color bars by category by uploading an extra column to indicate colors (this should be done before uploading the data). When the data contains more than two columns, you will see a "Select column" dropdown menu where you can select a column to indicate color. In the example below, the color contains 3 categories: red, gray, and green. 

In this panel, we can also decide if our chart should have a  color key or not. If we click on the text field next to a color, we can also change the description. If you delete the description for a color key, it will not be shown. 

For our chart, the panel looks like this at the end: 

Sorting & Grouping 

In the fourth and last panel in the tab 'Refine", you can sort and group bars. The default setting for the order of the bars is the order that was in your spreadsheet, but you can change that from the following three switches. 

  • Sort bars: By turning this on, you can sort the bars in numeric order. So you'll have the largest bars/values at the top and the smallest bars/values at the bottom. 
  • Reverse order: This will do the opposite of "Sort bars" and you'll have the smallest bars/values at the top and the largest bars/values at the bottom. 
  • Group bars by column: You can upload an extra column to put categories into an extra group, similar to when adding a column for the color category. In our case, we could have a column that states for each country if it's in "Western Europe" or "Eastern Europe". If we chose that column as our "Groups", the chart would make a separation between the bars for Western and for Eastern Europe. If you want a step-by-step guide on how to create grouped bar charts, please refer to our tutorial "How to create a grouped bar chart"
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 clarify 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. Whenever possible, ensure that you provide a source name and source URL for every map or chart to increase transparency. E.g. US Bureau of Labour Statistics, August 2017
  • If you want, enter your name or the author of the chart in the byline to let the readers know who created the chart. 

Highlight elements

In the 2nd panel in the "Annotate" tab, we can choose to highlight elements: The label in front of these bars will appear in bold. We can revert the highlight by clicking on the x in front of the label:


3

Design

In the ''Design'' tab under step 3: Visualize, you can select a preset layout and enable social sharing functions to share your work. Users of the Free plan have two options: one layout with and one without the "Get the data" link. Users of Datawrapper's Custom and Enterprise plan have the option to select a custom layout here. The output locale option allows you to choose in which format do you want the decimals, 1000 separators and dates to appear in your visualization.


4

Publish

In the final step 4: Publish & Embed, you have the option to publish the chart either by  sharing the URL or by copying the embed code directly on your website or CMS (recommended). You can also download your chart as a PNG (available to all users regardless of the type of subscription plan they have) or as an SVG or PDF (available only to users of Custom and Enterprise plan). For more information on the different pricing plans, click here.