How to create a

Grouped Column Chart.

Create an embeddable 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

See how to create your grouped column chart in less than a minute.

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 the line of FIFA's revenue history:

[["Jahr","Revenue in mm. €","Net Profit in mm. €"],["1998","282","1"],["1999","133","-66"],["2000","428","94"],["2001","490","42"],["2002","694","-2"],["2003","575","114"],["2004","647","138"],["2005","663","162"],["2006","749","249"],["2007","882","49"],["2008","957","184"],["2009","1059","196"],["2010","1291","202"],["2011","1070","36"],["2012","1166","89"],["2013","1386","72"],["2014","2096","141"]]

Copy the dataset into the upload field in Datawrapper, and click Upload and continueIn step 2, Datawrapper will show your data in a table, so you can check whether your data looks correct:

Everything looks good here! 

Pro Tip: You can add prefixes and suffixes to your data by highlighting the cell and adding them in the field on the left side. Here in this GIF you can see how it works:

Click on Proceed to continue and see your visualization.

Creating the chart

Datawrapper automatically created a bar chart with our dataset.

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

Our column chart will appear automatically, and since our dataset contains two value columns (Revenue and Net Profit), there's a switch to change:

Quite cool! We can also show the two values next to each other by choosing Grouped Column Chart as chart type:

We'll, this didn't really go as planned. We wanted to show the values next to each other, not in two separated groups:

Pro Tip: When you're Datawrapper visualization does not look as expected, click "Transpose the data" on the left side to switch the x and y-axis. 

Now that's better!

The finished chart

This is the chart we just created:

Click here to create your own chart with Datawrapper!

Bonus: How to publish

Embedding charts into your website is super easy. If you use Datawrapper for free, you can download the chart as a ZIP file and host it on your own website yourself.

When you upgraded to Datawrapper single, you 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 Export for embedding. 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