TAChart Tutorial: Stacked BarSeries

Introduction

In the BarSeries tutorial we had demonstrated how to create a chart with bar series arranged in a side-by-side manner. Stacked bars are another popular variant of bar charts where the grouped data are stacked onto each other. In this way, the individual contributions and their sum can be shown within the same plot. There is also a variant in which the total bar heights are normalized to 100% to emphasize the relative contributions [1].

We'll apply this technique in the current tutorial to plot the progress in generation of renewable energies in Germany between 1990 and 2012; the data are taken from wikipedia and cover hydropower, wind energy, energy from bio mass, photovoltaics, and geothermal energy.

Besides TBarSeries you'll meet TRandomChartSource, TCalculatedChartSource, and TChartStyles in this tutorial unit.

As usual, you must have some basic knowledge of Lazarus, Object Pascal, and the key concepts of TAChart to follow the tutorial. If you have never worked with bar charts it is a good idea to look at the related tutorial explaining the side-by-side arrangement of bars. For additional reading we recommend the TAChart documentation.

Designing the chart with random data

Preparations

Create a new project. Add a TAChart component, and align it to alClient to completely fill the form. Maybe you should increase the size of the form a bit, but you can do this later when you see the data.

Before using the "real data" we'll arrange and format the chart to our liking. For this purpose it is advantageous to get a quick response to the changes made in the object inspector. Therefore, we propose to use a TRandomChartSource linked to the BarSeries. A RandomChartSource just produces random data, but is a great helper to to optimize the appearence of the chart without having to recompile the project again and again. Of course, at the end, we will remove the RandomChartSource and replace it with the data of interest.

So, let's start: Add a TBarSeries and a TRandomChartSource to the form, and link the RandomChartSource to the Source property of the BarSeries. (If you need more details have a look at the other BarSeries tutorial). Select the RandomChartSource, and set XMin to 1990 and XMax to 2012 (which is the range of our original data in the wikipedia article). In total, these are 23 years, so you set PointsNumber to 23 in order to get a bar for each year. Finally, set YMax to 1 (or any other numbers that you prefer). Now a bar series pops into the chart:

Multiple y values

If you had read the other BarSeries tutorial you may be surprised now: In that tutorial, we had used a single series for each group of bars. In our final renewable energy plot there will be several types of bars, one for each energy kind. So, shouldn't we add some more series?

No. We only need one since we cannot follow the strategy of the side-by-side series here. This is because TAChart cannot stack the bars of different series onto each other. Each bar is drawn from a common "zero level" up (or down) to the data value - no way to shift the next bar up to the end of the previous bar.

What to do?

For stacking of series, TAChart offers the special concept of multiple y values per series data point. If you look into unit TACustomSource you'll find the record

type
  TChartDataItem = packed record
  public
    X, Y: Double;
    Color: TChartColor;
    Text: String;
    YList: TDoubleDynArray;
    ...
  end;

This is the internal structure of the data plotted in a series. Besides the usual x and y coordinates that you know from other plot types and tutorials, there is also a data field YList which reserves storage for additional y values. The chart source provides the property YCount to define the length of the array YList - select the RandomChartSource and have a look at the Object Inspector. But you should know that YCount includes also the standard y value, the length of the YList array for the other y values, therefore, is YCount-1.

Our final plot will contain five column types ("hydro power", "wind energy", "bio mass", "photo-voltaics", and "geothermal"). Therefore, enter 5 for YCount. This creates stacks of five bars.

Using ChartStyles

Unfortunately, all bars are in the same color. How can we modify the color of each bar level?

We need another component to address this: ChartStyles. This is a collection of TChartStyle components which allow to modify the appearance ("style") of each set of bars.

Go to the component palette, find the 9th icon (the one with the brush in front of the colored bars), and add the component to the form.

At first you have to link the BarSeries to the ChartStyles component. The series has a corresponding property Styles for this purpose.

Then, select the component, and go to its Styles property in the object inspector. Click on the ellipsis button "..." to open the ChartStyles editor. Here you can add a style for each group of bars by clicking on the "+" button five times. Alternatively you can right-click on the "Styles" node in the object tree of ChartStyles1 and select "Add item".

In the the ChartStyle editor you can select each style and you'll see the style's properties in the object inspector. The TChartStyle item with the index 0 belongs to the bottom-most bar, index 1 belongs to the next bar, etc. For changing the color of the bars, modify the Brush.Color of the style. The chart immediately updates and displays the corresponding bar in the new color. Repeat this with the other styles. Have a look at the other properties of the TChartStyle to learn what else can be adapted.

Showing ChartStyles in the legend

Using the ChartStyle property Text you can assign a legend item for each bar level. Set Text to "Hydropower", "Wind energy", "Bio mass", "Photovoltaic", and "Geothermal" for the styles, starting with index 0.

In order to show the legend you know that you have to set the chart's Legend.Visible property to true; it is false by default. The legend, however, displays only a single entry, a red box corresponding to the bar series without usage of ChartStyles. In order to correct that, select the BarSeries, and open the node Legend in the object inspector. The property Legend.Multiplicity is still at lmSingle which produces only a single legend item per series. Change it to lmStyle instead. This is the correct setting when the series uses styles. Now the chart reads the Text values of each style and adds them to the legend.

Normalizing bar stacks to 100%

In order to emphasize the evolution of the relative contributions of the individual bar groups stacked bar charts are often normalized to 100%, i.e. each bar value is replaced by its percentage of the total stack heights.

TAChart can do this with a little modification of the current program. The key ingredient is usage of a TCalculatedChartSource which picks up the data from the currently used chart source and calculates the relative contributions.

Add a TCalculatedChartSource to the form. Set its property Origin to point to our RandomChartSource. This means that the CalculatedChartSource will perform its calculations based on the data of our chart. It is important that you leave AccumulationMethod at its default, camNone, which means that the input data are passed to the output unchanged. The other options would combine input data values to new values: camAverage, for example, would cause calculation of the average of the data points within the AccumulationRange. But how do we get the percentage calculation if camNone does not change anything? Simple - there is a Percentage property! The normalization is applied after the accumulation calculations. Set Percentage to true.

We don't see a change in the chart yet, because the series still gets its data from the RandomChartSource. Go to the BarSeries and select the CalculatedChartSource as Source.

Here we are!

Plotting real data

Now that the chart is practically finished it's getting time to remove the random data and replace them with the "real data". As noted in the introduction, we want to plot the evolution of renewable energy generation during various years. The data can be found at the end of the wikipedia article.

At first, do the bravery test: delete the RandomChartSource, we don't need it any more - all the previous data are gone, and the chart becomes empty...

How do we get the new data to the series?

Providing real data to the bar series

Add a TListChartSource to the form. It will house the data. Please remember that every data point consists of five y values in our project. Therefore, you must set the YCount property of this chart source to 5 again. To put the multiple y data into the list source it has a method AddXYList where you can specify all y values at once.

function TListChartSource.AddXYList(
  AX: Double; const AY: array of Double; 
  const ALabel: String = '';
  AColor: TChartColor = clTAColor): Integer;

But don't forget that the count of Double array elements must match the YCount specified.

For simplicity we type the data from the wikipedia page and call AddXYList in the OnCreate event of the form:

procedure TForm1.FormCreate(Sender: TObject);
begin
  with ListChartSource1 do begin
    // Y0 = Hydropower
    // Y1 = Wind energy (off-shore + on-shore)
    // Y2 = Biomass + biogenic share of waste
    // Y3 = Photovoltaics
    // Y4 = Geothermal energy
    // all values in GWh
    // source: http://en.wikipedia.org/wiki/Renewable_energy_in_Germany   
    AddXYList(1990, [15580, 71, 221+1213, 0.6, 0]);
    AddXYList(1991, [15402, 100, 260+1211, 1.6, 0]);
    AddXYList(1992, [18091, 275, 296+1262, 3.2, 0]);
    AddXYList(1993, [18526, 600, 433+1203, 5.8, 0]);
    AddXYList(1994, [19501, 909, 569+1306, 8, 0]);
    AddXYList(1995, [20747, 1500, 665+1348, 11, 0]);
    AddXYList(1996, [18340, 2032, 759+1343, 16, 0]);
    AddXYList(1997, [18453, 2955, 880+1397,   26, 0]);
    AddXYList(1998, [18452, 4489, 1642+1618, 32, 0]);
    AddXYList(1999, [20686, 5528, 1849+1740,   42, 0]);
    AddXYList(2000, [24867, 9513, 2893+1844, 64, 0]);
    AddXYList(2001, [23241, 10509, 3348+1859, 75, 0]);
    AddXYList(2002, [23662, 15786, 4089+1949, 162, 0]);
    AddXYList(2003, [17722, 18713, 6086+2161, 313, 0]);
    AddXYList(2004, [19910, 25509, 7960+2117, 556, 0.2]);
    AddXYList(2005, [19576, 27229, 10978+3047, 1282, 0.2]);
    AddXYList(2006, [20042, 30710, 14841+3844, 2220, 0.4]);
    AddXYList(2007, [21169, 39713, 19760+4521, 3075, 0.4]);
    AddXYList(2008, [20446, 40574, 22872+4659, 4420, 17.6]);
    AddXYList(2009, [19036, 30602+38, 25989+4352, 6583, 18.8]);
    AddXYList(2010, [20956, 37619+174, 29085+4781, 11683, 27.7]);
    AddXYList(2011, [17674, 48315+568, 31920+5000, 19340, 18.8]);
    AddXYList(2012, [21200, 45325+675, 35950+4900, 28000, 25.4]);
  end;
end;

Don't forget to link the ListChartSource it to the Origin of the CalculatedChartsource. Then compile. Here is the output when CalculatedChartSource.Percentage = true:

Refinements

To complete the chart add a title to the axes ("Year" for the horizontal axis, "Energy, GWh" for the vertical axis. In addition, it would be fine to show a title above the chart ("Generation of renewable energy in Germany"), and a footer with the wikipedia reference.

Change to BackColor of the chart to clWhite. Reduce the Margins.Bottom to 0 in order to remove the gap between bars and x axis.

Finally you could add a panel with a checkbox to toggle between "normal" and "percentage" view of the stacked bar chart. Let's leave the code to be assigned to the OnClick event of the checkbox as a home work...

Summary

These are the steps to create a stacked bar chart:

You need only one series, but it must contain multiple y values
In the chartsource, set YCount to the number of stack levels required.
Add data to the chartsource by calling AddXYList. Be aware that the number of values passed to the array parameter matches the YCount specified.
Add a TChartStyles component to the form and link it to the propery Style of the BarSeries
For each stack level, add a TChartStyle.
Select the color of the stacked bar by means of the corresponding ChartStyle. Moreover, enter the legend text in the field Text of the ChartStyle.
To show the ChartStyle text entries in the legend use the value lmStyle for the Legend.Multiplicity of the series.
For creating a normalized stacked bar chart, add a TCalculatedChartSource to the form. Link its Origin property to the chartsource providing the data for plotting. Use the CalculatedChartSource as Source of the series. Set the CalculatedChartSource's Percentage to true in order to activate normalization to 100%.
The same methodology can be applied to create stacked area and line series.
Not mentioned in the text, but the BarSeries of Lazarus v2.0+ exposes a property Stacked which switches between stacked and side-by-side arrangement of the y values. This simplifies the creation of side-by-side bar charts.

Source code

Project file

program project1;

{$mode objfpc}{$H+}

uses
  {$IFDEF UNIX}{$IFDEF UseCThreads}
  cthreads,
  {$ENDIF}{$ENDIF}
  Interfaces, // this includes the LCL widgetset
  Forms, Unit1, tachartlazaruspkg
  { you can add units after this };

{$R *.res}

begin
  RequireDerivedFormResource := True;
  Application.Initialize;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.

Unit1.pas

unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, TAGraph, TASeries, TASources, TAStyles,
  Forms, Controls, Graphics, Dialogs, ExtCtrls, StdCtrls;

type

  { TForm1 }

  TForm1 = class(TForm)
    CalculatedChartSource1: TCalculatedChartSource;
    Chart1: TChart;
    Chart1BarSeries1: TBarSeries;
    ChartStyles1: TChartStyles;
    CheckBox1: TCheckBox;
    ListChartSource1: TListChartSource;
    Panel1: TPanel;
    procedure CheckBox1Click(Sender: TObject);
    procedure FormCreate(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}

{ TForm1 }

procedure TForm1.FormCreate(Sender: TObject);
begin
  with ListChartSource1 do begin
    // Y0 = Hydropower
    // Y1 = Wind energy (off-shore + on-shore)
    // Y2 = Biomass + biogenic share of waste
    // Y3 = Photovoltaics
    // Y4 = Geothermal energy
    // all values in GWh
    // source: http://en.wikipedia.org/wiki/Renewable_energy_in_Germany
    AddXYList(1990, [15580, 71, 221+1213, 0.6, 0]);
    AddXYList(1991, [15402, 100, 260+1211, 1.6, 0]);
    AddXYList(1992, [18091, 275, 296+1262, 3.2, 0]);
    AddXYList(1993, [18526, 600, 433+1203, 5.8, 0]);
    AddXYList(1994, [19501, 909, 569+1306, 8, 0]);
    AddXYList(1995, [20747, 1500, 665+1348, 11, 0]);
    AddXYList(1996, [18340, 2032, 759+1343, 16, 0]);
    AddXYList(1997, [18453, 2955, 880+1397,   26, 0]);
    AddXYList(1998, [18452, 4489, 1642+1618, 32, 0]);
    AddXYList(1999, [20686, 5528, 1849+1740,   42, 0]);
    AddXYList(2000, [24867, 9513, 2893+1844, 64, 0]);
    AddXYList(2001, [23241, 10509, 3348+1859, 75, 0]);
    AddXYList(2002, [23662, 15786, 4089+1949, 162, 0]);
    AddXYList(2003, [17722, 18713, 6086+2161, 313, 0]);
    AddXYList(2004, [19910, 25509, 7960+2117, 556, 0.2]);
    AddXYList(2005, [19576, 27229, 10978+3047, 1282, 0.2]);
    AddXYList(2006, [20042, 30710, 14841+3844, 2220, 0.4]);
    AddXYList(2007, [21169, 39713, 19760+4521, 3075, 0.4]);
    AddXYList(2008, [20446, 40574, 22872+4659, 4420, 17.6]);
    AddXYList(2009, [19036, 30602+38, 25989+4352, 6583, 18.8]);
    AddXYList(2010, [20956, 37619+174, 29085+4781, 11683, 27.7]);
    AddXYList(2011, [17674, 48315+568, 31920+5000, 19340, 18.8]);
    AddXYList(2012, [21200, 45325+675, 35950+4900, 28000, 25.4]);
  end;
end;

procedure TForm1.CheckBox1Click(Sender: TObject);
begin
  CalculatedChartSource1.Percentage := Checkbox1.Checked;
  if Checkbox1.Checked then
    Chart1.LeftAxis.Title.Caption := 'Contribution, %'
  else
    Chart1.LeftAxis.Title.Caption := 'Energy, GWh';
end;

end.

Unit1.lfm

object Form1: TForm1
  Left = 596
  Height = 270
  Top = 353
  Width = 517
  Caption = 'Form1'
  ClientHeight = 270
  ClientWidth = 517
  OnCreate = FormCreate
  LCLVersion = '1.3'
  object Chart1: TChart
    Left = 0
    Height = 248
    Top = 22
    Width = 517
    AxisList = <    
      item
        Minors = <>
        Title.LabelFont.Orientation = 900
        Title.LabelFont.Style = [fsBold]
        Title.Visible = True
        Title.Caption = 'Energy, GWh'
      end    
      item
        Alignment = calBottom
        Minors = <>
        Title.LabelFont.Style = [fsBold]
        Title.Visible = True
        Title.Caption = 'Year'
      end>
    BackColor = clWhite
    Foot.Alignment = taLeftJustify
    Foot.Brush.Color = clBtnFace
    Foot.Font.Color = clGray
    Foot.Text.Strings = (
      'Source: http://en.wikipedia.org/wiki/Renewable_energy_in_Germany'
    )
    Foot.Visible = True
    Legend.Visible = True
    Margins.Bottom = 0
    Title.Brush.Color = clBtnFace
    Title.Font.Color = clBlue
    Title.Font.Style = [fsBold]
    Title.Text.Strings = (
      'Generation of renewable energy in Germany'
    )
    Title.Visible = True
    Align = alClient
    ParentColor = False
    object Chart1BarSeries1: TBarSeries
      Legend.Multiplicity = lmStyle
      BarBrush.Color = clRed
      Source = CalculatedChartSource1
      Styles = ChartStyles1
    end
  end
  object Panel1: TPanel
    Left = 0
    Height = 22
    Top = 0
    Width = 517
    Align = alTop
    BevelOuter = bvNone
    ClientHeight = 22
    ClientWidth = 517
    TabOrder = 1
    object CheckBox1: TCheckBox
      Left = 8
      Height = 19
      Top = 0
      Width = 119
      Caption = 'Normalize to 100%'
      OnClick = CheckBox1Click
      TabOrder = 0
    end
  end
  object ChartStyles1: TChartStyles
    Styles = <    
      item
        Brush.Color = clBlue
        Text = 'Hydropower'
      end    
      item
        Brush.Color = clSkyBlue
        Text = 'Wind energy'
      end    
      item
        Brush.Color = clGreen
        Text = 'Biomass'
      end    
      item
        Brush.Color = clYellow
        Text = 'Photovoltaic'
      end    
      item
        Brush.Color = clMaroon
        Text = 'Geothermal'
      end>
    left = 336
    top = 96
  end
  object CalculatedChartSource1: TCalculatedChartSource
    Origin = ListChartSource1
    left = 104
    top = 96
  end
  object ListChartSource1: TListChartSource
    YCount = 5
    left = 232
    top = 96
  end
end