Template:Data bars/bar

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

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.

{{Data bars/bar}}

Color

A parameter called color specifies the color of the bar.

{{Data bars/bar|color=powderblue}}

{{Data bars/bar|color=#B0E0E6}}

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

{{Data bars/bar|color=red |name=California}} {{Data bars/bar|color=blue |name=Florida }} {{Data bars/bar|color=yellow|name=Oregon }} {{Data bars/bar|color=green |name=Missouri }}

California Florida Oregon Missouri

Height or Width

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

{{Data bars/bar | color = green | height = 60 }}

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

{{Data bars/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.

{{Data bars/bar | color = orange | height = 80 | size = 4 }}

{{Data bars/bar | color = red | width = 80 | size = 4 }}

Stacking

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

{{Data bars/bar|height=50|color=red}} {{Data bars/bar|height=30|color=green}} {{Data bars/bar|height=40|color=blue}}

{{Data bars/bar|width=50|color=red}} {{Data bars/bar|width=30|color=green}} {{Data bars/bar|width=40|color=blue}}

Labels

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

Label

A label is applied below the bar.

{{Data bars/bar | label = Oranges | height = 80 }}

Oranges

{{Data bars/bar | label = Apples | width = 80 }}

Apples

Value

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.

{{Data bars/bar | height = 80 | label = Oranges | value = 80,000 }}

80,000 Oranges

{{Data bars/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.

{| |- style="vertical-align:bottom;" | {{Data bars/bar | value = 80}} | {{Data bars/bar | value = 23}} | {{Data bars/bar | value = 42}} | {{Data bars/bar | value = 13}} | {{Data bars/bar | value = 66}} |}

80 23 42 13 66

Name

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.

{{Data bars/bar | height = 80 | name = 80,000 }}

80,000

{{Data bars/bar | width = 80 | name = 80,000 }}

80,000

A name, instead of a label, may be useful when stacking bars. '''Apples''' {{Data bars/bar | height = 50 | color = red | name = Florida }} {{Data bars/bar | height = 80 | color = green | name = California }} {{Data bars/bar | height = 40 | color = blue | name = Oregon }} Apples Florida California Oregon

But a stacked color key is usually better. (Notice how in the main stack only the bottom bar is given a label.) {| |- style="vertical-align:top;" |<!----------------------- -- stack of bars -- -------------------------> {{Data bars/bar|height=50|color=red }} {{Data bars/bar|height=80|color=green }} {{Data bars/bar|height=40|color=blue|label='''Apples'''}} |<!---------------------- -- color key -- ------------------------> {{Data bars/bar|color=red |name=Florida }} {{Data bars/bar|color=green |name=California}} {{Data bars/bar|color=blue |name=Oregon }} |} Apples Florida California Oregon

Titles

By default, the color of a bar is displayed as text when the cursor is pointed at the bar. This is helpful to persons with color blindness.

However, you can override the default and provide even more helpful information by specifying a "title" for the bar.

{{Data bars/bar| width = 50| color = red | name = Florida | title = 50}} {{Data bars/bar| width = 80| color = green | name = California| title = 80}} {{Data bars/bar| width = 40| color = blue | name = Oregon | title = 40}}

Florida California Oregon

This may be especially handy in a color key, to display totals, for example.

{{Data bars/bar|color=red |name=Florida | title = 5000}} {{Data bars/bar|color=green |name=California| title = 8000}} {{Data bars/bar|color=blue |name=Oregon | title = 4000}}

Florida California Oregon

Alternatively, a title can be appended parenthetically to a name by setting a parameter called detailed.

If you are creating a template, such as Data bars, this adds some flexibility by allowing you to use the title parameter to display more detailed information about a bar right on the page while leaving the default as it was.

{{Data bars/bar|color=red |name=Florida | title = 7000| detailed=true}} {{Data bars/bar|color=green |name=California| title = 8000| detailed=true}} {{Data bars/bar|color=blue |name=Oregon | title = 6000| detailed=true}}

Florida (7000) California (8000) Oregon (6000)

The above documentation is transcluded from Template:Data bars/bar/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.