TAChart Tutorial: Stacked BarSeries: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		## Introduction
2	2
3	3		![](/wiki-images/7/7e/StackedBarSeries_Final.png)
4	4
5	5		In the [[TAChart Tutorial: BarSeries\|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](http://blog.visual.ly/how-groups-stack-up-when-to-use-grouped-vs-stacked-column-charts/).
6	6
7	7		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](http://en.wikipedia.org/wiki/Renewable_energy_in_Germany) and cover hydropower, wind energy, energy from bio mass, photovoltaics, and geothermal energy.
8	8
9	9		Besides [[TAChart documentation\|TBarSeries]] you'll meet [[TAChart documentation\|TRandomChartSource]], [[TAChart documentation\|TCalculatedChartSource]], and `TChartStyles` in this tutorial unit.
10	10
11	11		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 [[TAChart Tutorial: BarSeries\|side-by-side arrangement of bars]]. For additional reading we recommend the [[TAChart documentation]].
12	12
13	13		## Designing the chart with random data
14	14
15	15		### Preparations
16	16
17	17		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.
18	18
19	19		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 [[TAChart documentation\|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.
20	20
21	21		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 [[TAChart Tutorial: BarSeries\|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](http://en.wikipedia.org/wiki/Renewable_energy_in_Germany)). 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:
22	22
23	23		![](/wiki-images/e/e4/StackedBarSeries_Step1.png)
24	24
25	25		### Multiple y values
26	26
27	27		If you had read the other [[TAChart Tutorial: BarSeries\|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?
28	28
29	29		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.
30	30
31	31		What to do?
32	32
33	33		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
34	34
35	35		``` pascal
36	36		type
37	37		TChartDataItem = packed record
38	38		public
39	39		X, Y: Double;
40	40		Color: TChartColor;
41	41		Text: String;
42	42		YList: TDoubleDynArray;
43	43		...
44	44		end;
45	45		```
46	46
47	47		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`.
48	48
49	49		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.
50	50
51	51		![](/wiki-images/4/46/StackedBarSeries_Step2.png)
52	52
53	53		### Using ChartStyles
54	54
55	55		Unfortunately, all bars are in the same color. How can we modify the color of each bar level?
56	56
57	57		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.
58	58
59	59		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.
60	60
61	61		![](/wiki-images/6/6c/ChartStyles.png)
62	62
63	63		At first you have to link the BarSeries to the ChartStyles component. The series has a corresponding property `Styles` for this purpose.
64	64
65	65		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".
66	66
67	67		![](/wiki-images/c/c5/ChartStylesEditor.png)
68	68
69	69		![](/wiki-images/a/a8/ChartStylesEditor_Properties.png)
70	70
71	71		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.
72	72
73	73		### Showing ChartStyles in the legend
74	74
75	75		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.
76	76
77	77		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.
78	78
79	79		![](/wiki-images/9/97/StackedBarSeries_Step3.png)
80	80
81	81		### Normalizing bar stacks to 100%
82	82
83	83		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.
84	84
85	85		`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.
86	86
87	87		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`.
88	88
89	89		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`.
90	90
91	91		Here we are!
92	92
93	93		![](/wiki-images/8/8b/StackedBarSeries_Percentage.png)
94	94
95	95		## Plotting real data
96	96
97	97		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](http://en.wikipedia.org/wiki/Renewable_energy_in_Germany).
98	98
99	99		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...
100	100
101	101		How do we get the new data to the series?
102	102
103	103		### Providing real data to the bar series
104	104
105	105		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.
106	106
107	107		``` pascal
108	108		function TListChartSource.AddXYList(
109	109		AX: Double; const AY: array of Double;
110	110		const ALabel: String = '';
111	111		AColor: TChartColor = clTAColor): Integer;
112	112		```
113	113
114	114		But don't forget that the count of `Double` array elements must match the `YCount` specified.
115	115
116	116		For simplicity we type the data from the wikipedia page and call `AddXYList` in the `OnCreate` event of the form:
117	117
118	118		``` pascal
119	119		procedure TForm1.FormCreate(Sender: TObject);
120	120		begin
121	121		with ListChartSource1 do begin
122	122		// Y0 = Hydropower
123	123		// Y1 = Wind energy (off-shore + on-shore)
124	124		// Y2 = Biomass + biogenic share of waste
125	125		// Y3 = Photovoltaics
126	126		// Y4 = Geothermal energy
127	127		// all values in GWh
128	128		// source: http://en.wikipedia.org/wiki/Renewable_energy_in_Germany
129	129		AddXYList(1990, [15580, 71, 221+1213, 0.6, 0]);
130	130		AddXYList(1991, [15402, 100, 260+1211, 1.6, 0]);
131	131		AddXYList(1992, [18091, 275, 296+1262, 3.2, 0]);
132	132		AddXYList(1993, [18526, 600, 433+1203, 5.8, 0]);
133	133		AddXYList(1994, [19501, 909, 569+1306, 8, 0]);
134	134		AddXYList(1995, [20747, 1500, 665+1348, 11, 0]);
135	135		AddXYList(1996, [18340, 2032, 759+1343, 16, 0]);
136	136		AddXYList(1997, [18453, 2955, 880+1397, 26, 0]);
137	137		AddXYList(1998, [18452, 4489, 1642+1618, 32, 0]);
138	138		AddXYList(1999, [20686, 5528, 1849+1740, 42, 0]);
139	139		AddXYList(2000, [24867, 9513, 2893+1844, 64, 0]);
140	140		AddXYList(2001, [23241, 10509, 3348+1859, 75, 0]);
141	141		AddXYList(2002, [23662, 15786, 4089+1949, 162, 0]);
142	142		AddXYList(2003, [17722, 18713, 6086+2161, 313, 0]);
143	143		AddXYList(2004, [19910, 25509, 7960+2117, 556, 0.2]);
144	144		AddXYList(2005, [19576, 27229, 10978+3047, 1282, 0.2]);
145	145		AddXYList(2006, [20042, 30710, 14841+3844, 2220, 0.4]);
146	146		AddXYList(2007, [21169, 39713, 19760+4521, 3075, 0.4]);
147	147		AddXYList(2008, [20446, 40574, 22872+4659, 4420, 17.6]);
148	148		AddXYList(2009, [19036, 30602+38, 25989+4352, 6583, 18.8]);
149	149		AddXYList(2010, [20956, 37619+174, 29085+4781, 11683, 27.7]);
150	150		AddXYList(2011, [17674, 48315+568, 31920+5000, 19340, 18.8]);
151	151		AddXYList(2012, [21200, 45325+675, 35950+4900, 28000, 25.4]);
152	152		end;
153	153		end;
154	154		```
155	155
156	156		Don't forget to link the ListChartSource it to the `Origin` of the CalculatedChartsource. Then compile. Here is the output when `CalculatedChartSource.Percentage = true`:
157	157
158	158		![](/wiki-images/c/c9/StackedBarSeries_Percentage_RealData.png)
159	159
160	160		### Refinements
161	161
162	162		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.
163	163
164	164		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.
165	165
166	166		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...
167	167
168	168		![](/wiki-images/7/7e/StackedBarSeries_Final.png)
169	169
170	170		## Summary
171	171
172	172		These are the steps to create a stacked bar chart:
173	173
174	174		- You need only one series, but it must contain multiple y values
175	175		- In the chartsource, set `YCount` to the number of stack levels required.
176	176		- Add data to the chartsource by calling `AddXYList`. Be aware that the number of values passed to the array parameter matches the `YCount` specified.
177	177		- Add a `TChartStyles` component to the form and link it to the propery `Style` of the BarSeries
178	178		- For each stack level, add a `TChartStyle`.
179	179		- 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.
180	180		- To show the ChartStyle text entries in the legend use the value `lmStyle` for the `Legend.Multiplicity` of the series.
181	181		- 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%.
182	182		- The same methodology can be applied to create stacked area and line series.
183	183		- 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.
184	184
185	185		## Source code
186	186
187	187		### Project file
188	188
189	189		``` pascal
190	190		program project1;
191	191
192	192		{$mode objfpc}{$H+}
193	193
194	194		uses
195	195		{$IFDEF UNIX}{$IFDEF UseCThreads}
196	196		cthreads,
197	197		{$ENDIF}{$ENDIF}
198	198		Interfaces, // this includes the LCL widgetset
199	199		Forms, Unit1, tachartlazaruspkg
200	200		{ you can add units after this };
201	201
202	202		{$R *.res}
203	203
204	204		begin
205	205		RequireDerivedFormResource := True;
206	206		Application.Initialize;
207	207		Application.CreateForm(TForm1, Form1);
208	208		Application.Run;
209	209		end.
210	210		```
211	211
212	212		### Unit1.pas
213	213
214	214		``` pascal
215	215		unit Unit1;
216	216
217	217		{$mode objfpc}{$H+}
218	218
219	219		interface
220	220
221	221		uses
222	222		Classes, SysUtils, FileUtil, TAGraph, TASeries, TASources, TAStyles,
223	223		Forms, Controls, Graphics, Dialogs, ExtCtrls, StdCtrls;
224	224
225	225		type
226	226
227	227		{ TForm1 }
228	228
229	229		TForm1 = class(TForm)
230	230		CalculatedChartSource1: TCalculatedChartSource;
231	231		Chart1: TChart;
232	232		Chart1BarSeries1: TBarSeries;
233	233		ChartStyles1: TChartStyles;
234	234		CheckBox1: TCheckBox;
235	235		ListChartSource1: TListChartSource;
236	236		Panel1: TPanel;
237	237		procedure CheckBox1Click(Sender: TObject);
238	238		procedure FormCreate(Sender: TObject);
239	239		private
240	240		{ private declarations }
241	241		public
242	242		{ public declarations }
243	243		end;
244	244
245	245		var
246	246		Form1: TForm1;
247	247
248	248		implementation
249	249
250	250		{$R *.lfm}
251	251
252	252		{ TForm1 }
253	253
254	254		procedure TForm1.FormCreate(Sender: TObject);
255	255		begin
256	256		with ListChartSource1 do begin
257	257		// Y0 = Hydropower
258	258		// Y1 = Wind energy (off-shore + on-shore)
259	259		// Y2 = Biomass + biogenic share of waste
260	260		// Y3 = Photovoltaics
261	261		// Y4 = Geothermal energy
262	262		// all values in GWh
263	263		// source: http://en.wikipedia.org/wiki/Renewable_energy_in_Germany
264	264		AddXYList(1990, [15580, 71, 221+1213, 0.6, 0]);
265	265		AddXYList(1991, [15402, 100, 260+1211, 1.6, 0]);
266	266		AddXYList(1992, [18091, 275, 296+1262, 3.2, 0]);
267	267		AddXYList(1993, [18526, 600, 433+1203, 5.8, 0]);
268	268		AddXYList(1994, [19501, 909, 569+1306, 8, 0]);
269	269		AddXYList(1995, [20747, 1500, 665+1348, 11, 0]);
270	270		AddXYList(1996, [18340, 2032, 759+1343, 16, 0]);
271	271		AddXYList(1997, [18453, 2955, 880+1397, 26, 0]);
272	272		AddXYList(1998, [18452, 4489, 1642+1618, 32, 0]);
273	273		AddXYList(1999, [20686, 5528, 1849+1740, 42, 0]);
274	274		AddXYList(2000, [24867, 9513, 2893+1844, 64, 0]);
275	275		AddXYList(2001, [23241, 10509, 3348+1859, 75, 0]);
276	276		AddXYList(2002, [23662, 15786, 4089+1949, 162, 0]);
277	277		AddXYList(2003, [17722, 18713, 6086+2161, 313, 0]);
278	278		AddXYList(2004, [19910, 25509, 7960+2117, 556, 0.2]);
279	279		AddXYList(2005, [19576, 27229, 10978+3047, 1282, 0.2]);
280	280		AddXYList(2006, [20042, 30710, 14841+3844, 2220, 0.4]);
281	281		AddXYList(2007, [21169, 39713, 19760+4521, 3075, 0.4]);
282	282		AddXYList(2008, [20446, 40574, 22872+4659, 4420, 17.6]);
283	283		AddXYList(2009, [19036, 30602+38, 25989+4352, 6583, 18.8]);
284	284		AddXYList(2010, [20956, 37619+174, 29085+4781, 11683, 27.7]);
285	285		AddXYList(2011, [17674, 48315+568, 31920+5000, 19340, 18.8]);
286	286		AddXYList(2012, [21200, 45325+675, 35950+4900, 28000, 25.4]);
287	287		end;
288	288		end;
289	289
290	290		procedure TForm1.CheckBox1Click(Sender: TObject);
291	291		begin
292	292		CalculatedChartSource1.Percentage := Checkbox1.Checked;
293	293		if Checkbox1.Checked then
294	294		Chart1.LeftAxis.Title.Caption := 'Contribution, %'
295	295		else
296	296		Chart1.LeftAxis.Title.Caption := 'Energy, GWh';
297	297		end;
298	298
299	299		end.
300	300		```
301	301
302	302		### Unit1.lfm
303	303
304		-	~~``` pascal~~
	304	+	``` lfm
305	305		object Form1: TForm1
306	306		Left = 596
307	307		Height = 270
308	308		Top = 353
309	309		Width = 517
310	310		Caption = 'Form1'
311	311		ClientHeight = 270
312	312		ClientWidth = 517
313	313		OnCreate = FormCreate
314	314		LCLVersion = '1.3'
315	315		object Chart1: TChart
316	316		Left = 0
317	317		Height = 248
318	318		Top = 22
319	319		Width = 517
320	320		AxisList = <
321	321		item
322	322		Minors = <>
323	323		Title.LabelFont.Orientation = 900
324	324		Title.LabelFont.Style = [fsBold]
325	325		Title.Visible = True
326	326		Title.Caption = 'Energy, GWh'
327	327		end
328	328		item
329	329		Alignment = calBottom
330	330		Minors = <>
331	331		Title.LabelFont.Style = [fsBold]
332	332		Title.Visible = True
333	333		Title.Caption = 'Year'
334	334		end>
335	335		BackColor = clWhite
336	336		Foot.Alignment = taLeftJustify
337	337		Foot.Brush.Color = clBtnFace
338	338		Foot.Font.Color = clGray
339	339		Foot.Text.Strings = (
340	340		'Source: http://en.wikipedia.org/wiki/Renewable_energy_in_Germany'
341	341		)
342	342		Foot.Visible = True
343	343		Legend.Visible = True
344	344		Margins.Bottom = 0
345	345		Title.Brush.Color = clBtnFace
346	346		Title.Font.Color = clBlue
347	347		Title.Font.Style = [fsBold]
348	348		Title.Text.Strings = (
349	349		'Generation of renewable energy in Germany'
350	350		)
351	351		Title.Visible = True
352	352		Align = alClient
353	353		ParentColor = False
354	354		object Chart1BarSeries1: TBarSeries
355	355		Legend.Multiplicity = lmStyle
356	356		BarBrush.Color = clRed
357	357		Source = CalculatedChartSource1
358	358		Styles = ChartStyles1
359	359		end
360	360		end
361	361		object Panel1: TPanel
362	362		Left = 0
363	363		Height = 22
364	364		Top = 0
365	365		Width = 517
366	366		Align = alTop
367	367		BevelOuter = bvNone
368	368		ClientHeight = 22
369	369		ClientWidth = 517
370	370		TabOrder = 1
371	371		object CheckBox1: TCheckBox
372	372		Left = 8
373	373		Height = 19
374	374		Top = 0
375	375		Width = 119
376	376		Caption = 'Normalize to 100%'
377	377		OnClick = CheckBox1Click
378	378		TabOrder = 0
379	379		end
380	380		end
381	381		object ChartStyles1: TChartStyles
382	382		Styles = <
383	383		item
384	384		Brush.Color = clBlue
385	385		Text = 'Hydropower'
386	386		end
387	387		item
388	388		Brush.Color = clSkyBlue
389	389		Text = 'Wind energy'
390	390		end
391	391		item
392	392		Brush.Color = clGreen
393	393		Text = 'Biomass'
394	394		end
395	395		item
396	396		Brush.Color = clYellow
397	397		Text = 'Photovoltaic'
398	398		end
399	399		item
400	400		Brush.Color = clMaroon
401	401		Text = 'Geothermal'
402	402		end>
403	403		left = 336
404	404		top = 96
405	405		end
406	406		object CalculatedChartSource1: TCalculatedChartSource
407	407		Origin = ListChartSource1
408	408		left = 104
409	409		top = 96
410	410		end
411	411		object ListChartSource1: TListChartSource
412	412		YCount = 5
413	413		left = 232
414	414		top = 96
415	415		end
416	416		end
417	417		```
418	418
419	419		---
420	420		From the Free Pascal wiki, page "TAChart Tutorial: Stacked BarSeries", as it stood on 2020-02-29 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history