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. A single line, flexible width version of this template is available at Template:Composition bar compact.

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 light grey) 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 templates.

Additional display options:

background-color=...

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

border=...

(default is medium grey) is the color of the border, or "none" for no border

width=...

(default is 100px) a width value for the bar, such as "100%" or "8em" (unitless numbers are interpreted as px)

per=...

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

ref=...

(default is blank), may be used to add a reference/citation for the numbers.

Examples

Code	Result
{{Composition bar|50|100|red}}	50 / 100 <div style="background-color: red; width: %; height: 100%;">
{{Composition bar|50|100|red|background-color=#DDD|border=none}}	50 / 100 <div style="background-color: red; width: %; height: 100%;">
{{Composition bar|50|100|#99F|width=85%}}	50 / 100 <div style="background-color: 99F; width: %; height: 100%;">
{{Composition bar|50|100|{{party color|Green Party (UK)}}}}	50 / 100 <div style="background-color: ; width: %; height: 100%;">
{{Composition bar|50|100|rgb(255,255,16)}}	50 / 100 <div style="background-color: rgb(255,255,16); width: %; height: 100%;">
{{Composition bar|75|100|#FF0}}	75 / 100 <div style="background-color: FF0; width: %; height: 100%;">
{{Composition bar|40|100|#F00|per=1}}	40 / 100 (%) <div style="background-color: F00; width: %; height: 100%;">
{{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}	90 / 100 (%) <div style="background-color: F0F0F0; width: %; height: 100%;">
{{Composition bar|90|100|#F0C|per=1}}	90 / 100 (%) <div style="background-color: F0C; width: %; height: 100%;">
{{Composition bar|0|26|hex=#00BFFF|per=1}}	0 / 26 (%) <div style="background-color: 00BFFF; width: %; height: 100%;">

TemplateData

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

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 {{party color|political party}} templates. Default #CCCCCC	Line	optional
Background color	background-color	The background color of the right part of the bar - a valid web color. Default transparent	Line	optional
Border color	border border-color	The color of the border, or 'none' for no border Default #AAAAAA	Line	optional
Width	width	The width of the bar with units, such as 100% or 10em (unitless numbers are interpreted as px) Default 100px	Line	optional
Show percent	per	When set to 1 (true), adds a percentage to the bar as well Default 0	Line	optional

See also

• {{Bartable}}
• {{Bar chart}}
• {{Composition bar compact}}