Customizing your stacked column chart

This tutorial describes how to customize a stacked column chart in Datawrapper. We assume that you have already uploaded your dataset into Datawrapper and selected the stacked column chart. Let us show you how to make a beautiful stacked column visualisation in three simple steps.

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", the first thing that you'll see is the option to adjust the colors of your bars. You can either define a base color for your columns, and Datawrapper will automatically pick shades to color your bars. Or you can click on "customize colors", to assign each bar an own color. Datawrapper will show you a list of the labels in your first column. Click on a label (e.g. "Revenue") and then on the color box below "Choose a Color". A small popup will open, and you'll be able to choose a new color for your selected label. 

You can also "Reset all colors" (to the right) or select all or none colors below the list of labels.

Below the "customize color" feature, you have more options: You can...

  • Automatically sort bars. You'll find that the bars appear in the order in your original dataset, so this feature can be helpful to create a different order. In our case, we don't want to automatically sort the bars.
  • Stack percentages, to create a 100% stacked column chart. This is a great feature if the absolute values are not important for the statement you want to make with your chart, but the shares of each segment.  

Labels

In the next panel, "Labels", you can make two decisions: 

  • Show grid lines. If you select this checkbox, y-axis gridlines will appear.
  • Show or hide value labels. Per default, we only show the value labels on the bars if readers hover of them. Here, you can decide to disable that or to always show the value labels. 
  • Connect bars with areas: This will show a low-opacity rectangle between the bar segments of the same category across all columns.

Layout (desktop & mobile)

In these two last panels in the "Refine" tab, you can adjust the design of your chart: Do you want to place the category label directly at the right of the columns (Direct labeling: yes)? How big should the margins be between your chart and the border? You can experiment with these settings until your happy, and decide if you want the same layout for mobile in the last panel.

Note that you have very long labels or many columns, it makes sense to not direct label in the mobile layout. You can check the appearance of your chart on mobile with the buttons below the chart: 

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 variables. To do so, select the element(s) you want to highlight. The rest of the bars will automatically tone down: 

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