Template:Composition bar/doc

This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{Infobox political party}} to show the number of seats a given political party holds in a legislature.

Usage

{{Composition bar|amount|total|bar-color|options...}}

amount

The first parameter is the number of sub-units.

total

The second parameter is the total number of sub-units possible.

bar-color

(default is very dark grey, nearly black) The third parameter is the background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)).
In the case of political parties, most will have their logo color available in {{political party/meta/color}} templates.

Additional display options:

background-color=...

(default is medium-dark grey) is the background color of the right part of the bar - a valid web color.

color=...

(default is white) is the color of the text

text-shadow=...

(default is black) is the color of the shadow around the text

border-color=...

(default is no border) is the color of a border around the bar

width=...

(default is 100%) is the width of the bar

per=...

(default is false), when set to any value (true), adds a percentage to the bar as well

perstyle=...

(default is none), additional style declarations for the percentage text

Some older Web browsers do not render text-shadows, so the text should ideally have enough contrast on its own. If the bar color is light, darken the color, and lighten the background-color and text-shadow. See the second and third examples below. Snook's Colour Contrast Check may be used to check compliance with WCAG guidelines for contrast.

Examples

Code	Result
{{Composition bar|50|100|red}}	50 / 100
{{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}	50 / 100
{{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}	50 / 100
{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}	50 / 100
{{Composition bar|50|100|rgb(255,255,16)}}	50 / 100
{{Composition bar|75|100|#FF0|width=80%}}	75 / 100
{{Composition bar|40|100|#F00|per=1}}	40 / 100 (40%)
{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}	90 / 100 (90%)
{{Composition bar|90|100|#F0C|per=1}}	90 / 100 (90%)

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools; see the monthly parameter usage report for this template.

TemplateData for Composition bar

A composition bar.

Template parameters

Parameter		Description	Type	Status
1	1	The number of sub-units.	Line	required
2	2	The total number of sub-units possible.	Line	required
3	3 hex	The background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)). In the case of political parties, most will have their logo color available in {{political party/meta/color}} templates. Default #333	Line	optional
Background color	background-color	The background color of the right part of the bar - a valid web color. Default #999	Line	optional
Text color	color	The color of the overlay text Default #fff	Line	optional
Text shadow	text-shadow	The color of the contrast shadow around the overlay text Default #000	Line	optional
Show border color	border-color	Specify a color to add a border of that color; default state is no border Default	Line	optional
Width	width	The width of the bar Default 100%	Line	optional
Show percent	per	When set to 1 (true), adds a percentage to the bar as well Default 0	Line	optional
Percent style	perstyle	Style declarations for the percentage text Default	Line	optional

See also

• {{Bartable}}
• {{Bar chart}}