Customizing your stacked bar chart

This tutorial explains how to customize the appearance of a Datawrapper stacked bar chart. We assume that you already uploaded data for your own or used the sample data from the "How to create a stacked bar chart" tutorial. After uploading your data, select stacked bar chart as your chart type. Below are three steps to customize your newly created stacked bars chart:

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). 

In this example, the chart is showing two opposite extremes: "Very high trust" and "Very low trust". In a case like this, it's good to select diverging for Value alignment. This will center-align the middle category (No answer) and right-align the labels of the two categories to the right. This helps to communicate that the chart is showing two opposed positions. 

Now, the most interesting setting in this panel 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. This setting will add a percentage sign. (In our chart, you'll realize that the Number format setting cannot be customized. This is because the chart is set to 'Stack percentages' (a feature that will come up later in this article) so the values are automatically normalized to 100%.) 

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 the sum of all values within a row. (In our chart, we've checked the Stacked percentages option, so Datawrapper will automatically stack the bars up to 100% without having to enter a custom range. )
  • 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. (In our chart, we turned on the 'Move labels to separate line'  feature in Labels panel which is why the Grid lines are automatically added without turning it on here.) 

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

Appearance

In the third panel in the tab "Refine", we can decide the design of our stacked bar chart: We can choose bar colors and decide if we want to separate rows with a line, make our bars thicker or stack the percentages.

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). We can also adjust the colors manually. This will help us to make the stacks more distinguishable. To do so, click on "customize colors" next to the base color. 

  • If you're working with surveys and have two opposed extremes like this example chart, we recommend the following: Tone down the neutrals like "No answer", and tone up the extremes to make them more clearly stand out. We use color saturation to categorize our measures so choose a color that is easily saturable! (Color saturation is about the intensity of the color. Color is more easily saturable when it's further away from the pure color grey. So choose a color that is stronger and less pale, like red and blue in the given example.)
  • By choosing a light grey for "No answer" we create a blank space. This is a valid visual option that helps make clear that a certain proportion did not answer at all. This little visual encoding trick gives the chart a nice touch.

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.  #15607a is a dark blue, #15607a50 is a dark blue with 50% opacity).

Below the "Appearance" panel, you will find a  “ Stack percentages” checkbox, which normalizes values to 100%. That means you can upload absolute values (“350 people liked it, 150 disliked it”) and then convert it to percentages directly in Datawrapper (“70% liked it, 30% disliked it”). 

Also, make sure that the " Color key" is ticked so that the reader can identify each color code. 

The following screenshot shows the changes we made:

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 here. 

  • 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. In our example, you can sort your charts by one of your columns, e.g. "Low Trust". The biggest value in this column will then be at the top.
  • 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 assign groups and. 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". 

For our chart, the panel looks like this:

2

Annotate

In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these options here.

Highlight elements

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

3

Layout

In the Layout tab, you can select an output locale, change the footer options and enable social sharing. You can find a detailed explanation of all the options here.

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 an SVG or PDF (available only to users of Custom and Enterprise plan). For more information on the different pricing plans, click here.