Customizing your stacked bar chart

Select  stacked bar chart after uploading your data. In this step you can further enhance the appearance of the chart. Plus, there are some small tricks - such as showing how many people did not answer at all visually (as in the example below). Let us show you how to make a beautiful stacked bar chart in three simple steps.

This guide will walk you through the steps necessary to create stacked bar a bar chart as seen above.

1. Refine

Under " Customize axes" you can check if your columns and rows are asisgned correctly.

  • Make sure that you have ticked "First row as label" in the 2nd step ("Check & Describe"). Datawrapper will most likely have done this automatically, but check briefly. 
  • The labels determine your dimensions of measures (these are the row headers in your dataset), displayed in front of each line of bars. For the stacked bar chart Datawrapper enables you to place these descriptions above the bar, which leaves room for cases where you have relatively long labels or questions. 
  • Each column of your dataset is represented by a color-coded part of a whole bar. Set "Goups" to labels to create one stack of bars per column of your dataset. 

For this example, we leave the sorting and labeling options at the default.

We will change the appearance by adjusting the colors manually. This will help us to make the stacks more distinguishable.

  • By choosing white for "No answer" we create a blank space. This is a valid visual option helps make clear that a certain proportion did not answer at all. This little visual encoding trick gives the chart a nice touch.
  • We use color saturation to categorize our measures. In this case: The more affirming the answer, the greater the saturation. Chosse a color that is easily saturable!

Lastly, make sure that " Show color key" is ticked so that the reader can identify each color code. The following screenshot shows the changes we made:

Click on " Proceed" to go to the next step.

2. Annotate

In this tab you can edit the  titledescription (sub-title), and add notes. Make your data accessible and explorable by stating the source name and providing its URL. Optionally, you can highlight a certain element of your chart.

3. Design

In this last step 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