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.
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 "Groups" to labels to create one stack of bars per column of your dataset.
Under " Sorting", you can check "Resort bars" and then choose a column to sort it by. Checking the checkbox "ascending" will turn your chart "upside-down": the top rows will become the bottom rows and the other way round.
Under " Labeling", you can decide the overall look of everything text-related in your chart. Make sure that the number format is the one that represents your data best. For very high numbers, choose "123k" or "123.4k"; for percentages, choose "0%".
Here you can also set gridlines and decide the intervals between them.
We will change the "Appearance" by adjusting 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.
- 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. Choose 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:
If you're working with surveys and have two opposed extremes like "Disagree" and "Agree", we recommend the following: Tone down the Neutrals and the Don’t knows, and tone up the extrema to make them more clearly stand out.
Click on " Proceed" to go to the next step.
In this tab, you can edit the title, description (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.
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 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.