In this tutorial, we will create a stacked area chart using DataPicta. A stacked area chart is useful for visualizing the cumulative contribution of different categories over time. We will also add a legend, a tooltip, and ensure the chart is responsive to different screen sizes.

The data for this chart comes from Our World in Data, the data represents the global CO₂ emissions by sector over time. CO₂ emissions are measured in Gt, one gigatonne is equal to one billion metric tonnes. CO₂ emissions are responsible for climate change.

Download the data

The data from Our World in Data has its values in tonnes, for this tutorial we have converted the values to Gt (gigatonnes) by dividing them by 1,000,000,000 using a spreadsheet application. The data can be downloaded by clicking this link: CO2-emissions-by-sector.csv.

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'.
• Click 'Upload'.
• Choose the file you just downloaded: CO2-emissions-by-sector.csv.
• After uploading the file, click on 'Add data'.
• Your data should now be visible in the data table.

Create the first picta

• Click on the plus icon (+) next to 'Picta'.
• Select 'Line' from the list of pictas.
• A new panel appears where you can customize the line picta.
• Click on 'Area Style' to add an area under the line.

The line picta has chosen the first field (Year) as the X axis and the second field (Buildings) as the vertical axis. If you would add a second line picta, it would use the first field (Year) as the horizontal axis and the third field (Industry) as the vertical axis.

You can check this by simply clicking the duplicate icon on the first picta. If you do this, please delete this second picta again by clicking the trash icon on the duplicated picta.

For most most charts this default behavior is sufficient, but we want the ability to change the order of stacked fields later, therefore we will explicitly set the vertical axes.

• In the first picta, click on 'Encode' and select 'Buildings' for the 'Vertical axis':

This does not change the chart, but it makes sure that the vertical axis is explicitly set to 'Buildings'. We will duplicate this picta multiple times, once per sector. But before we do that, we will customize the appearance of the picta a bit more. By doing this now, we only have to do it once.

• Disable 'Show symbol' to remove the circles on the line, you need to click the checkbox twice.
• For 'Smoothing', choose '30%', this will make the line smoother.
• For 'Stack' type 'total', this will make sure that the areas are stacked on top of each other, instead of overlapping. You may have typed any word here, as long as all pictas have the same value for 'Stack', they will be stacked.
• For 'Stack order', choose 'Descending', this will stack the areas in the same order as the upcoming picta panels and eventually the legend.
• Change the 'Name' to 'Buildings', this will be used in the legend and tooltip. Change the 'Id' to 'Buildings' too, that is just for the panel naming.

Duplicate the picta for each sector

There are nine sectors in total, so we will duplicate the picta eight times and change the vertical axis for each picta.

• Click the duplicate icon on the first picta.
• Change the 'Vertical axis' in 'Encode' to the next sector (check one and uncheck one)
• Change the 'Name' and 'Id' to the appropriate sector name, you can type the sector name or you can copy the name to the clipboard by clicking on the field name in the data table and pasting it into the 'Name' and 'Id' fields.
• Repeat this for all sectors

To make the chart a bit more appealing, we will change the order of the pictas by clicking the arrow icons. Larger areas should be at the bottom, smaller areas on top. We came up with the following order:

• Fugitive emissions from energy production
• Other fuel combustion
• Bunker fuels
• Industry
• Land-use change and forestry
• Transport
• Buildings
• Manufacturing and construction
• Electricity and heat

Title and tooltip

Lets add a title to this area chart.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Title' from the list of canvas items.
• For 'Title' type 'Global CO₂ Emissions by Sector'.

Lets also add a tooltip, so when hovering over the chart, the values for each sector are shown per year.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Tooltip' from the list of canvas items.
• For 'Trigger' choose 'Axis', this will show the tooltip when hovering over the chart.

Legend

Lets also add a legend to the chart, so the sectors can be identified by their color.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Legend' from the list of canvas items.
• For 'Icon' choose 'Circle'.
• For 'Vertical Position' choose 'Bottom'.
• For 'Horizontal Position' choose 'Left'.
• For 'Orientation' choose 'Vertical'.

Since the legend is quite long it overlaps with the chart, we can fix this by changing the margins of the chart.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Grid' from the list of canvas items.
• For 'Bottom' type '230 pixels'.

The legend has a fixed height, so we choose pixels here, not percentages. We do the same for the title.

• For 'Top' type '85 pixels'.

You might also want to set the left and right margins.

• For 'Left' type '7 percent'.
• For 'Right' type '7 percent'.

Responsive design

If you are working on a large screen the chart looks good now, because there is enough space for the legend and the title. But on a medium screen size (tablet) the space for the chart is reduced and on a small screen size (mobile phone) there is no room left for the chart. You can test this by clicking on the icons for screen sizes on the top left above the chart. Currently the aspect ratio is fixed to 4:3, for all screen sizes. Lets make the aspect ratio different for different screen sizes to solve this issue.

• Click on the plus icon (+) next to 'Canvas'.
• Select 'Aspect Ratio' from the list of canvas items.

We found the following aspect ratios to work well for all screen sizes:

• For the default aspect ratio choose '2 : 3' (width = 2, height = 3).
• For 'Medium' choose '4 : 5'.
• For 'Large' choose '1 : 1'.

Now play with the screen size buttons on the top left to see how the chart adapts to different screen sizes.

Finishing touches

To horizontal axis shows years, that is self explanatory. The vertical axis shows CO₂ emissions in Gt, but the unit is not shown. Lets add a label to the vertical axis.

• Open the panel for vertical axis.
• For 'Name' type 'CO₂ emissions in Gigatons (Gt)'.
• For 'Name location' choose 'Center'.

The horizontal axis also needs a small change.

• Open the panel for horizontal axis.
• Set the 'Boundary gap' to 'False', this will make sure that the area starts exactly at the beginning of the axis

And we are done! You have created a stacked area chart with a legend, a tooltip and a responsive design.