Template:Brick chart

Template documentation[view] [edit] [history] [purge]

This is the TemplateData for this template used by TemplateWizard, VisualEditor and other tools. See a monthly parameter usage report for this template in articles based on this TemplateData.

TemplateData for Brick chart

Draws a "brick chart" (square alternative to pie charts) as a rectangular-box chart with brick segments inside, useful for showing percentages, seats in a legislature, etc.

Template parameters[Edit template data]

Parameter		Description	Type	Status
Alignment	thumb	Align graph to left or right of page (floating), centre it, or no alignment option. Suggested values left right none center	String	optional
Style	style	Additional CSS for container	String	optional
Width	width	Width in pixels Default 180	Number	optional
Total	total	The total number of bricks (defaults to 100) Default 100	Number	optional
Stride	stride	The number of bricks in each row, defaults to 10. Default 10	Number	optional
Value 1	value1	Values for each brick. Values can be integers, decimals ("2.4"), formulas, or use '+' in mixed number fractions ("3+1/2").	Unknown	required
Brick size	brick_size	Value represented by one brick - defaults to one.	Number	optional
Colour 1	color1	CSS colour of each brick, defaults to various colours. E.g. red, blue, #893. Default red	Unknown	optional
Value 2	value2	no description	Unknown	required
Colour 2	color2	no description Default green	String	optional
value3	value3	no description	Unknown	optional
Color 3	color3	no description Default blue	Unknown	optional
value4	value4	no description	Unknown	optional
Color 4	color4	no description Default yellow	Unknown	optional
value5	value5	no description	Unknown	optional
Color 5	color5	no description Default magenta	Unknown	optional
value6	value6	no description	Unknown	optional
Color 6	color6	no description Default cyan	Unknown	optional
value7	value7	no description	Unknown	optional
Color 7	color7	no description Default brown	Unknown	optional
value8	value8	no description	Unknown	optional
Color 8	color8	no description Default orange	Unknown	optional
value9	value9	no description	Unknown	optional
Color 9	color9	no description Default purple	Unknown	optional
Caption	caption	no description	Line	optional
Legend margin	legend_margin	A CSS margin value to override the default	String	optional
Label 1	label1	Legend label for the first brick.	Line	required
Unit	unit	Unit to display in the legend, default to %	String	optional
Label 2	label2	no description	Line	suggested
Label 3	label3	no description	Line	suggested
Label 4	label4	no description	Line	suggested
Label 5	label5	no description	Line	suggested
Label 6	label6	no description	Line	suggested
Label 7	label7	no description	Line	suggested
Label 8	label8	no description	Line	suggested
Label 9	label9	no description	Line	suggested
"Other" label	other	Legend for the leftover space in the graph, defaults to "Other".	Line	optional

Examples

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Example of 6 amounts

██ one - 42 %██ two - 32 %██ three - 12 %██ four - 3 %██ five - 2 %██ six - 0.4 %██ Other - 8.6 %

The following 2 examples have numbers in the range of 0-100 units, as percentages. The total is assumed as total=100, to calculate the "other" amount by subtracting all brick values from 100.

{{Brick chart
| caption=Example of 6 amounts
| value1=42 | label1=one
| value2=32 | label2=two
| value3=12 | label3=three
| value4=3 | label4=four
| value5=2 | label5=five
| value6=0.4 | label6=six
}}

Note how the bottom value, value6=0.4, generates a "tiny sliver" of a brick, and the calculated remainder, the "other" value is also a decimal amount as 8.6.

The brick colours use the defaults: red, dark green, blue, yellow, purple, and cyan, as the first 6 hues. The next example, below, shows use of some colour parameters by setting: color1, color2, color3.

---

 

 

 

 

 

 

 

Religion in the Czech Republic

██ Atheists / agnostics - 59 %██ Catholics - 26.8 %██ Protestants - 2.5 %██ Other - 11.7 %

{{Brick chart
| caption=Religion in the Czech Republic
| label1 = [[Atheist]]s / [[agnostic]]s
  | value1 = 59 | color1 = silver
| label2 = [[Catholic Church|Catholics]]
  | value2 = 26.8 | color2 = #008
| label3 = [[Protestantism|Protestants]]
  | value3 = 2.5 | color3 = #08f
| legend_margin=0 0 0 6px
}}

The 2nd example, for Religion in the Czech Republic, shows the use of indented parameters for the value/color under each label phrase. The color #008 (for "Catholic") is a hexadecimal code for dark blue, using RGB notation, where the 3rd digit "8" is half of blue intensity levels, 0-F.

It is customary to list the larger percentages first, in a table; however, the numbers can be displayed in any order as needed for the text on a page. A small decimal amount, such as 0.4, will show a tiny sliver among the various brick bars.

The option "legend_margin=0 0 0 6px" resets the alignment of the legend boxes, as only 6 pixels from the left margin (default: 3px 0 0 10px).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Seats in the German federal parliament

██ Christian Democratic Union - 180 seats██ Christian Social Union of Bavaria - 46 seats██ Social Democratic Party of Germany - 222 seats██ Free Democratic Party - 61 seats██ The Left Party.PDS - 54 seats██ Alliance '90/The Greens - 51 seats

Larger amounts: The following example has numbers in the range of 0-300 units, as counts. The total is set to total=614. The options stride=20 and brick_size=2.6 scale the bar line segments to fit within the box, rather than 6x times larger, as 614 compared to 100.

{{Brick chart
|caption = Seats in the German federal parliament
|total = 614
|unit = seats
|stride = 20
|brick_size=2.6
|label1=[[Christian Democratic Union (Germany)
     |Christian Democratic Union]]
  | color1=black
  | value1=180
|label2=[[Christian Social Union of Bavaria]]
  | color2=#ccf
  | value2=46
|label3=[[Social Democratic Party of Germany]]
  | color3=red
  | value3=222
|label4=[[Free Democratic Party]]
  | color4=yellow
  | value4=61
|label5=[[The Left Party.PDS]]
  | color5=#800
  | value5=54
|label6=[[Alliance '90/The Greens]]
  | color6=green
  | value6=51
}}

Performance considerations

The Template:Brick_chart draws the chart by using div-tags ("<div>") to show colored bars for line segments of the calculated length. The template can format a brick chart within 1/6 second, so 3 brick charts could appear within a page and add only 1/2 second to reformat, or edit-preview. The initial creation of the template occurred in August 2009; however, the alignment for display problems with overlapped bars was fixed in September 2012, over 3 years later.

See also

• {{Pie chart}}

The above documentation is transcluded from Template:Brick chart/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.