This template draws a "bar" with a 1-pixel gray border for use in a bar chart.

By default the bar is colored light gray and has an internal width and height of 20 pixels.

{{User:Jonathan Lane Studeman/Barchart/bar}}

Color

edit

A parameter called color specifies the color of the bar.

{{User:Jonathan Lane Studeman/Barchart/bar|color=powderblue}}
{{User:Jonathan Lane Studeman/Barchart/bar|color=#B0E0E6}}

By combining colors with labels (see below), you can easily produce a color key. For example,

{{User:Jonathan Lane Studeman/Barchart/bar|color=red   |name=California}}
{{User:Jonathan Lane Studeman/Barchart/bar|color=blue  |name=Florida   }}
{{User:Jonathan Lane Studeman/Barchart/bar|color=yellow|name=Oregon    }}
{{User:Jonathan Lane Studeman/Barchart/bar|color=green |name=Missouri  }}
California
Florida
Oregon
Missouri

Height or Width

edit

A parameter called height specifies the internal height of the bar in a vertical bar chart.

{{User:Jonathan Lane Studeman/Barchart/bar
| color  = green
| height = 60
}}

A parameter called width specifies the width of the bar in a horizontal bar chart.

{{User:Jonathan Lane Studeman/Barchart/bar
| color = yellow
| width = 60
}}

Height and width cannot be used together. However, if bars of a different width are desired in a vertical bar chart, or bars of a different height are desired in a horizontal bar chart, a parameter called size can be used.

{{User:Jonathan Lane Studeman/Barchart/bar
| color = orange
| height = 80
| size  = 4
}}
{{User:Jonathan Lane Studeman/Barchart/bar
| color = red
| width = 80
| size  = 4
}}

Stacking

edit

Bars can be "stacked," in vertical or horizontal charts, simply by listing them consecutively.

{{User:Jonathan Lane Studeman/Barchart/bar|height=50|color=red}}
{{User:Jonathan Lane Studeman/Barchart/bar|height=30|color=green}}
{{User:Jonathan Lane Studeman/Barchart/bar|height=40|color=blue}}
{{User:Jonathan Lane Studeman/Barchart/bar|width=50|color=red}}
{{User:Jonathan Lane Studeman/Barchart/bar|width=30|color=green}}
{{User:Jonathan Lane Studeman/Barchart/bar|width=40|color=blue}}

Lables

edit

Labels can be applied to bars using the parameters label and/or value and/or name.


Label

edit

A label is applied below the bar.

{{User:Jonathan Lane Studeman/Barchart/bar
| label = Oranges
| height = 80
}}
Oranges
{{User:Jonathan Lane Studeman/Barchart/bar
| label = Apples
| width = 80
}}
Apples


Value

edit

A value is a label with a smaller font-size and that might be used to display a number that is represented by the bar.

This so-called value of the bar is displayed above the bar in a vertical bar chart, and to the right of the bar in a horizontal bar chart.

{{User:Jonathan Lane Studeman/Barchart/bar
| height = 80
| label = Oranges
| value = 80,000
}}
80,000
Oranges
{{User:Jonathan Lane Studeman/Barchart/bar
| width = 80
| label = Apples
| value = 80,000
}}
80,000
Apples

The value does not have to be a number.

However, for the sake of simplicity in a vertical bar chart (only), the height can be omitted if a numerical value is provided.

{|
|- valign="bottom"
| {{User:Jonathan Lane Studeman/Barchart/bar | value = 80}}
| {{User:Jonathan Lane Studeman/Barchart/bar | value = 23}}
| {{User:Jonathan Lane Studeman/Barchart/bar | value = 42}}
| {{User:Jonathan Lane Studeman/Barchart/bar | value = 13}}
| {{User:Jonathan Lane Studeman/Barchart/bar | value = 66}}
|}
80
23
42
13
66


Name

edit

A name is the final type of label that is available. Just like a value, it has a smaller font-size and might be used to display a number represented by the bar.

The only difference is its placement. The name, if any, is displayed to the right of the bar in a vertical bar chart, and above the bar in a horizontal bar chart.

{{User:Jonathan Lane Studeman/Barchart/bar
| height = 80
| name = 80,000
}}
80,000
{{User:Jonathan Lane Studeman/Barchart/bar
| width = 80
| name = 80,000
}}
80,000
A name, instead of a label, may be useful when stacking bars.
'''Apples'''
{{User:Jonathan Lane Studeman/Barchart/bar
| height = 50
| color  = red
| name   = Florida
}}
{{User:Jonathan Lane Studeman/Barchart/bar
| height = 80
| color  = green
| name   = California
}}
{{User:Jonathan Lane Studeman/Barchart/bar
| height = 40
| color  = blue
| name   = Oregon
}}

Apples

Florida
California
Oregon
But a stacked color key is usually better. (Notice how only the bottom bar is given a label.)
{|
|<!-----------------------
--    stack of bars     --
------------------------->
{{User:Jonathan Lane Studeman/Barchart/bar|height=50|color=red   }}
{{User:Jonathan Lane Studeman/Barchart/bar|height=80|color=green }}
{{User:Jonathan Lane Studeman/Barchart/bar|height=40|color=blue|label='''Apples'''}}
|<!----------------------
--      color key      --
------------------------>
{{User:Jonathan Lane Studeman/Barchart/bar|color=red   |name=Florida   }}
{{User:Jonathan Lane Studeman/Barchart/bar|color=green |name=California}}
{{User:Jonathan Lane Studeman/Barchart/bar|color=blue  |name=Oregon    }}
|}
Apples
Florida
California
Oregon
{{User:Jonathan Lane Studeman/Barchart/bar| width = 50| color = red   | name = Florida   }}
{{User:Jonathan Lane Studeman/Barchart/bar| width = 80| color = green | name = California}}
{{User:Jonathan Lane Studeman/Barchart/bar| width = 40| color = blue  | name = Oregon    }}
'''Oranges'''
Florida
California
Oregon

Oranges