How to create a stacked column chart

Available on all plans:
  • Free
  • Pro
  • Business
  • Enterprise

Stacked column charts are great for showing how a total is split into parts. Each column stands for one category, like a year, and is made up of colored segments, one for each part of the total. That makes it easy to compare both the totals and their parts, for example from one year to the next.

No matter how detailed your data is, the Datawrapper stacked column chart has an intelligent labeling function to avoid a cluttered visualization.

If you want to create this chart type, here's what you'll need:

  • One header row containing descriptive labels ("Spending", "2000", etc.)
  • One column with categories. These can be years, or other categories like regions, products, etc.
  • At least two columns containing numeric values. The values in these columns will define the height of each bar segment. Each column will be shown as one bar: we have four columns with six values each, so our chart will show four bars with six bar segments each. Since this is an absolute stacked column chart, the values do not have to add up to a certain value. If you are looking for a 100% stacked column chart, all values in one row must add up to 100% (or 1).

Below is the data we used to create the chart at the top of the page:

Spending 2000 2005 2010 2015
Government Pensions 0.5 0.7 1.0 1.2
Government Healthcare 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

Source: http://www.usgovernmentspending.com/breakdown

Once you have prepared your data, create a new chart in Datawrapper. You can do so by going to our homepage and clicking on Start creating. In step 1: Upload, you can copy & paste your dataset, upload it as a .csv, Excel file, or connect a Google Sheet. After uploading, the text field in step 1 will look like this:

Click Proceed at the bottom right to go to the next step.

In the second step, you can check if your dataset was imported correctly and make changes to it if necessary. If you did not upload a header row, you have to untick "First row as label" to avoid losing your first row of data. Do this if you don't have a header row.

In step 2, your data should look something like the figure below. You can see that Datawrapper correctly recognized your numbers as numbers (and not as text or dates) because they are colored in blue and are right-aligned. To learn more about Datawrapper's automatic recognition of data formats, visit this article.

To add a unit (like km/h, kg, inch, $, etc.) to your numbers, click on a column header and then add the unit of your choice to the Prepend/append options on the left. You can learn more about adding units to numbers here.

Click on Proceed at the bottom left to go to step 3: Visualize.

In this step and under the tab Chart type, you will see a list of the available chart types. Chances are that your data will automatically be displayed as a line chart. To change that to Stacked Column Chart, click on its symbol in the grid of available chart types:

You will now see a stacked column chart, without a title, descriptions or customized colors. The next step would be to further refine, annotate, and customize this chart. Besides Chart type, you'll notice three more tabs in this step: Refine, Annotate, and Layout.

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

We recommend checking what the chart looks like on different screen sizes multiple times while designing it, by clicking on the little icons (mobile, tablet, and computer) below the chart.

Learn more about changing the width and height of your chart in this article.

Let's continue with the Refine tab. Here, we see three panels: Vertical axis, Horizontal axis, and Appearance.

For the Vertical axis, you can modify:

  • custom range: allows you to set your own minimum and maximum values. However, please note that the vertical axis of a column chart is set, by default, to start at zero, meaning that you can only modify the maximum value on this axis.
  • show grid lines: depending on whether or not you want to highlight the display of certain values, you can choose to enable or disable this feature
  • show axis labels: with the first setting ''Number format'', you can decide how to show your values. Below are three examples but there are many different formats available and choice of a format ultimately depends on how big or small your values are:
    • Choose the number format "123.4k" if you have big numbers like "1,303,428" that you'd rather 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, like in our case. This setting will add a percentage sign.

The Horizontal axis panel lets you change what the axis below your columns looks like and in which order your columns appear.

  • Show grid lines: If you turn this on, you can choose under Line type whether you want Lines that go all the way up through the chart or Ticks, which are short marks at the axis only. Column charts normally don't need grid lines, though. The default is that grid lines are not shown.
  • Custom range: If your columns show dates, you can enter a start and end date here to only show part of your data, for example, only the years from 2005 to 2015.
  • Date format: If your columns show dates, choose how they should be written on the axis.
  • Custom ticks: By default, Datawrapper labels all text columns and labels date columns in a way that they don't overlap. If you want to show specific ones only, type them in here, separated by commas.
  • Automatically sort columns: By default, your columns appear in the same order as in your dataset (which is what we want for our years, too). Turn this on to sort them by their values instead, either with the largest first or the smallest first.
  • Reverse order: This flips the order of your columns, so the last column in your dataset appears first.

In the next panel, Appearance, you can modify three settings:

  • Customize color. This allows you to change the color of columns either based on one base color whose gradient you can change across different stacks or by using different colors for different stacks.

  • Show or hide value labels. By default, Datawrapper only shows the value labels on the bars if readers hover on them. But you can choose to disable that and always show the value labels.
  • Category labels. This lets you show the labels in two ways: direct or as a color key. In the direct option, you can show the labels for individual stacks next to them while the color key will show the labels at the top of the chart in the form of a key.

The Labels panel lets you decide how readers can tell your segments apart and which numbers they see.

  • Category labels: This is on by default, to label the segments in your columns. With Direct, the labels sit right next to the columns, so readers don't have to look back and forth between a legend and the chart. With color legend, they show up as a key above the chart instead, which can work better if you have many categories or long labels.
  • Use column color for labels: Check this box to show each label in the same color as its segment. That makes it even easier to see which label belongs to which part of the column.
  • Label margin: This sets how much space the direct labels get next to the chart. If your labels are long and get cut off, increase it. If there's a lot of empty space, decrease it.
  • Show values: This shows the value of each segment inside the column. Choose On hover to only show the values when readers move their mouse over a column, or Always to show them all the time, like we did in our chart.
  • Show totals: This shows the sum of all segments above each column. Turn it on if your readers care about the total as much as about the parts.
  • Number format: By default, the labels use the same number format as your vertical axis. You can pick a different one here, for example to show one decimal place in the labels but none on the axis.

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

In the second panel in the Annotate tab, you can emphasize certain categories. To do so, select the one(s) you want to highlight. The rest of the categories will automatically tone down:

Adding text annotations

You can add annotations to your stacked column chart by clicking on Add text annotation. You can then style and move the text, add an arrow and circle to it, and adjust how it will appear on mobile. Here's an in-depth explanation of all the options.

You can add range or line highlights to your chart by clicking on Add range highlight and then dragging on the chart where you want the highlight to be. You can then change its position, color, opacity, and line width and style, or delete it again. Here's an in-depth explanation of all the options.

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

In step 4: Publish & Embed, you can first publish your chart and then decide how it gets to your readers. We recommend pasting the embed code into your website or CMS, but you can also share the chart's URL. Learn more about both options here. To use your chart somewhere else, download it as a PNG (on any plan) or as an SVG or PDF (on paid plans). See what each plan includes on our pricing page.

And that's it! You've successfully created and customized your first stacked column chart.

Last updated on March 24th, 2025