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 ou chart: "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.)
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 ("Resize to"). We recommend to do this step first, but you can change the size of your chart at any point.
Customizing the axes
In the "Refine" tab, we see four panels. The first panel lets us customize your axes. Here we can choose which element in your chart shows which data:
- Values: Select the column header that contains the numeric values that you want to see as bars. We'll choose the column "Turnout" as our values.
- Labels: Select the column header that contains labels for each row. These labels are in your category-column. We'll choose the column "Country" as our labels.
- Groups: You can upload an extra column to put categories into extra group. In our case, we could have a column that states for each country if its 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.
- Color: You can upload an extra column to indicate colors. That works similarly to the "Groups" option. We could choose the column with the "Western Europe/Eastern Europe" text for this Color option. Then all Eastern Europe bars had another color than the Western Europe bars (we can also customize colors later in the "Appearance" panel, without uploading a column).
For our chart, the panel looks like this at the end:
In this panel, we have just one decision to make: How should the bars and their labels be sorted? You can keep the order of your spreadsheet with selecting "keep order". Or you can have the shortest bars/values at the top ("smallest first") or at the bottom ("largest first").
Our data is already sorted from small to large. So we can either select "keep order" or "smallest first" – it won't make a difference. For our chart, the panel looks like this at the end:
In the next panel, we can make some display decisions that are rather self-explanatory: Do we want to display the labels in a separate line? Hide the value labels? Display grid lines? 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"
- Choos 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.
For our chart, the panel looks like this at the end:
In the fourth and last panel in the tab "Refine", 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:
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 example, even if we have a mess like this, only the 2nd and the 5th color key will be shown:
Below the four panels, you can find one more option: "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:
These are all the options you can find in the Refine tab. Let's move on to the Annotate tab. Here you'll find two options: "Describe chart" and "Labeling".
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 the 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 or chart to increase transparency. E.g. US Bureau of Labour Statistics, August 2017
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:
Afer explaining the Annotate options, there's only one tab left: Design.
In this last step, we can select a preset layout and enable social sharing functions to spread your work.
- Users of the free plan or Single users have two options: One layout with and one without the "Get the data" link
- Users of every other plan are able to select a custom layout here
After we worked through the four tabs of step 3: Visualize, we can now proceed to step 4: Publish & Embed. Here we 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 on 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.