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

ParameterDescriptionTypeStatus
Alignmentthumb

Align graph to left or right of page (floating), centre it, or no alignment option.

Suggested values
left right none center
Stringoptional
Stylestyle

Additional CSS for container

Stringoptional
Widthwidth

Width in pixels

Default
180
Numberoptional
Totaltotal

The total number of bricks (defaults to 100)

Default
100
Numberoptional
Stridestride

The number of bricks in each row, defaults to 10.

Default
10
Numberoptional
Value 1value1

Values for each brick. Values can be integers, decimals ("2.4"), formulas, or use '+' in mixed number fractions ("3+1/2").

Unknownrequired
Brick sizebrick_size

Value represented by one brick - defaults to one.

Numberoptional
Colour 1color1

CSS colour of each brick, defaults to various colours. E.g. red, blue, #893.

Default
red
Unknownoptional
Value 2value2

no description

Unknownrequired
Colour 2color2

no description

Default
green
Stringoptional
value3value3

no description

Unknownoptional
Color 3color3

no description

Default
blue
Unknownoptional
value4value4

no description

Unknownoptional
Color 4color4

no description

Default
yellow
Unknownoptional
value5value5

no description

Unknownoptional
Color 5color5

no description

Default
magenta
Unknownoptional
value6value6

no description

Unknownoptional
Color 6color6

no description

Default
cyan
Unknownoptional
value7value7

no description

Unknownoptional
Color 7color7

no description

Default
brown
Unknownoptional
value8value8

no description

Unknownoptional
Color 8color8

no description

Default
orange
Unknownoptional
value9value9

no description

Unknownoptional
Color 9color9

no description

Default
purple
Unknownoptional
Captioncaption

no description

Lineoptional
Legend marginlegend_margin

A CSS margin value to override the default

Stringoptional
Label 1label1

Legend label for the first brick.

Linerequired
Unitunit

Unit to display in the legend, default to %

Stringoptional
Label 2label2

no description

Linesuggested
Label 3label3

no description

Linesuggested
Label 4label4

no description

Linesuggested
Label 5label5

no description

Linesuggested
Label 6label6

no description

Linesuggested
Label 7label7

no description

Linesuggested
Label 8label8

no description

Linesuggested
Label 9label9

no description

Linesuggested
"Other" labelother

Legend for the leftover space in the graph, defaults to "Other".

Lineoptional

Examples

lemba
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

lemba

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

lemba