How to create

stacked column charts.

Create an embeddable stacked column chart for your website in minutes with Datawrapper.

What You'll Learn


1.

Getting the data into Datawrapper

Learn how to get your dataset into Datawrapper.

2.

Creating the chart

Find out how to visualize it.

3.

How to publish it

Learn how to embed the chart in your website.

Importing the data

Create a new chart in Datawrapper and copy & paste your dataset. Datawrapper can work with all kinds of data, from Excel or Google Sheets to CSVs or just a pasted table. For example, this dataset powers the chart above:

[["Spending","2000","2005","2010","2015"],["Government Pensions","0.5","0.7","1.0","1.2"],["Government Health Care","0.5","0.8","1.1","1.4"],["Government Education","0.6","0.8","0.9","1.0"],["National Defense","0.4","0.6","0.8","0.8"],["Government Welfare","0.2","0.3","0.7","0.5"],["All Other Spending","1.0","1.2","1.4","1.5"]]

As you can see, the dataset contains one column per column in the chart, and one row per area in the chart. For stacked column charts, your data should follow this format. Copy the dataset into the upload field in Datawrapper, and click Upload and continue.

Creating the chart

Datawrapper automatically created a bar chart with our dataset.

To turn this into a stacked column chart, just click on Stacked Column Chart in the Chart Type tab, and Datawrapper will take care of the rest.


In the Annotate tab, we can set the title of the chart and add a description, as well as provide some information about the source of our data.

And there is our new chart:

So far, so good! Let's improve this chart a bit. In the Refine tab, you will find options to change spacing and appearance of your chart. 

You can change the base color, as well as change the order of the bars. 

We will enable the options "Show grid lines" and "Value labels" to make it easy for our readers to read the actual values. Also, "Connect bars with areas" makes sense here, since we want to visualize how the distribution changed over time.

In the "Layout" groups, we change the spacing for the chart. You can also overwrite the layout settings for mobile devices to make sure your chart looks great on smartphones as well.

Here's a GIF that shows how we change the chart:


Bonus: How to publish

Embedding charts into your website is super easy. When you're signed in, you'll see a range of publishing options for your chart:

You can download the chart as a static image, but the best way to use a Datawrapper chart is by embedding it directly into your website. To do so, click on Embed chart on website. Datawrapper automatically generates an iFrame-embed code that you can copy & paste directly into your CMS.

Copy the embed code into your website and you're done!

Other Interesting Tutorials

How to create a Stacked Column Chart

Learn how to create a stacked column chart in minutes with Datawrapper.

View Guide

All-new line charts

Datawrapper has completely revamped line charts: More responsive, cleaner and with annotations.

View Guide