A stacked bar chart is a type of bar chart that displays multiple data series stacked on top of each other. This tutorial will guide you through the steps to create a stacked bar chart using DataPicta. We will use sample data representing monthly energy production from different sources.

Open the DataPicta app

• Open the DataPicta app by going to app.datapicta.com (this will open separate browser tab).
• If you never used DataPicta before, you will only see a button for uploading data.
• If you have used DataPicta before, click on 'New blank chart' in the menu in the top right corner.

Upload your data

• Click on the plus icon (+) next to 'Data'.
• Copy and paste the following data:

Month,Solar,Wind,Hydro,Nuclear,Fossil
Jan,45,120,160,200,310
Feb,55,135,150,205,295
Mar,80,150,170,210,280
Apr,110,165,180,215,260
May,140,175,190,220,240
Jun,160,180,200,225,230
Jul,170,185,195,225,235
Aug,165,180,190,220,245
Sep,130,170,185,215,260
Oct,90,155,175,210,280
Nov,60,140,165,205,300
Dec,40,125,160,200,320

• After pasting the data, click on 'Add data'.
• Set the 'id' of the data to 'Monthly Energy Production by Source', this is just for your reference.

Create the bars for Solar energy

• Click on the plus icon (+) next to 'Picta'.
• Select 'Bar picta' from the list of pictas.
• For 'id', enter 'Solar'.
• For 'name', also enter 'Solar'.

The 'id' is used to identify the picta internally, you will see it in the panel name and it can be referenced in other components. The 'name' is used for display purposes, such as in the legend later on.

A picta always tries to find the best data columns to use for the picta type you selected. In this case, it has selected the 'Month' column for the X-axis and the 'Solar' column for the Y-axis. But let's do this manually to understand how it works.

• Select the 'Encode' checkbox to enable the encoding options.
• For 'Horizontal', select 'Month'.
• For 'Vertical', select 'Solar'.

Nothing has changed, but now you know how to manually set the data columns for the picta, which will be useful if the order of the columns in your data is different.

For a stacked bar chart, we need to set the 'stack' text field. You can enter any text you like here, as long as it is the same for all pictas that should be stacked together.

• In the 'stack' text field, enter 'energy'.

Add the bars for the Wind energy

Eventually, we will have one picta for each energy source, that will be five pictas in total. But they are similar, so we can duplicate the 'Solar' picta and just change the relevant parts.

• Click on the duplicate icon in the 'Solar' panel.
• Open the duplicated picta panel.
• Change the 'id' to 'Wind'.
• Change the 'name' to 'Wind'.
• In the 'Encode' section, change 'Vertical' to 'Wind' (check 'Wind' and uncheck 'Solar').
• Note that the 'stack' text field is still set to 'energy'.

Add the remaining energy sources

Now, repeat the same steps to add the remaining energy sources: Hydro, Nuclear, and Fossil. This should give you a total of five pictas, one for each energy source, and will result in this stacked bar chart.

Add a Legend

To give meaning to the colors used in the stacked bar chart, we need to add a legend.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Legend' from the list of canvas components.

The names used in the legend are taken from the names of each picta, if we would not have changed the default names, the legend would have shown 'Bar 1', 'Bar 2', etc.

Add a Title

Finally, let's add a title to the chart.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Title' from the list of canvas components.
• In the 'Title' text field, enter 'Monthly Energy Production by Source'.