Template:Bar chart
| City | Population |
|---|
.svg){kind=link}
 | {{Bar chart}} handles up to 4 columns and 30 rows of data. |
Lua error in Module:TNT at line 159: Missing JsonConfig extension; Cannot load https://commons.wikimedia.org/wiki/Data:I18n/Uses TemplateStyles.tab.
This template can be used to create a horizontal bar chart, scrolling down a page, in a format which can be parsed by text-based web browsers. The data items can be simple numbers, or the result of calculations based on template parameters.
Each data number (data1=7, data2=23...), in column 1, is scaled to parameter "data_max=" and the bars are sized by width in em units, such as "bar_width=16". By default, the data numbers are shown within each bar, but might display outside a bar when a relatively small number generates a short bar. Each bar can also have a comment, such as "comment7=xx" to show "(xx)" after the number in bar 7.
For a 2-column bar chart, the 2nd column items have prefix "col2_" such as scale maximum, col2_data_max=110, and col2_data3=67 with col2_comment3=zz. See below: "Example with two data columns". Each bar chart can be formatted typically within 1/5 second.
Usage and parameters
- The use of text other than numbers and proper punctuation in a data field will result in an Expression error.
{{Bar chart
| title = <!-- Title bolded above table; defaults to "List of cities by population" in {bar_chart}. -->
| table_width = <!-- Sets the overall table width in em -->
| bar_width = <!-- uses 30 by default. Must be an unformatted number -->
| label_type = <!-- Title for the label column; defaults to "City". -->
| label1 = <!-- Row 1 label -->
| label2 = <!-- Row 2 label -->
...
| label30 = <!-- Row 30 label -->
| data_type = <!-- Title for column 1 data. In {{Bar chart}}, defaults to "Population". -->
| data_max = <!-- Upper bound on the values in column 1 data fields (uses data1 if not present) -->
| data1 = <!-- Row 1, Column 1 data -->
| comment1 = <!-- Row 1, Column 1 comment -->
| data2 = <!-- Row 2, Column 1 data -->
| comment2 = <!-- Row 2, Column 1 comment -->
...
| data30 = <!-- Row 30, Column 1 data. {{Bar chart 4x9}} only supports up to data9. -->
| comment30 = <!-- Row 30, Column 1 comment. {{Bar chart 4x9}} only supports up to comment9. -->
| col2_data_type= <!-- Title for column 2 data -->
| col2_data_max = <!-- Upper bound on the values in column 2 data fields (uses col2_data1 if not present) -->
| col2_data1 = <!-- Row 1, Column 2 data -->
| col2_comment1 = <!-- Row 1, Column 2 comment -->
| col2_data2 = <!-- Row 2, Column 2 data -->
| col2_comment2 = <!-- Row 2, Column 2 comment -->
...
| col2_data30 = <!-- Row 30, Column 2 data. {{Bar chart 4x9}} only supports up to col2_data9. -->
| col2_comment30= <!-- Row 30, Column 2 comment. {{Bar chart 4x9}} only supports up to col2_comment9. -->
}}
Alignment
To float the bar chart on the right of the page, use
| float = right
To float the bar chart on the left of the page, use
| float = left
To float the bar chart to the center of the page, use
| float = center
The default is none.
Caption
To add a caption to the bottom of the chart, use
| caption =
Empty cells
Use – or — (or a similar dash character) as a placeholder in a cell where there is no data available. Leaving a cell completely blank can sometimes cause columns to be misaligned.
Example
| City | Population |
|---|---|
| City1 | |
| City2 | |
| City3 | |
| City4 | |
| City5 |
{{Bar chart
| title = Largest cities of Foo, 2009 Census
| bar_width = 35
| data_max = 600000
| label_type = City | data_type = Population
| label1 = City1 | data1 = 540,921
| label2 = City2 | data2 = 194,343
| label3 = City3 | data3 = 190,414
| label4 = City4 | data4 = 134,669
| label5 = City5 | data5 = 114,983
}}
Example with comments
| Year | Passengers (% change from prior year) |
|---|---|
| 2003-04 | |
| 2004-05 | |
| 2005-06 | |
| 2006-07 | |
| 2007-08 | |
| 2008-09 | |
| 2009-10 |
{{Bar chart
| title = Annual [[revenue passenger]] statistics
| label_type = Year
| data_type = Passengers (% change from prior year)
| data_max = 170,000
| label3 = 2003-04 | data3 = 110,649 | comment3 = +17.8%
| label4 = 2004-05 | data4 = 130,429 | comment4 = +17.9%
| label5 = 2005-06 | data5 = 138,547 | comment5 = +6.2%
| label6 = 2006-07 | data6 = 138,844 | comment6 = +0.2%
| label7 = 2007-08 | data7 = 149,544 | comment7 = +7.7%
| label8 = 2008-09 | data8 = 148,435 | comment8 = -0.7%
| label9 = 2009-10 | data9 = 168,147 | comment9 = +13.3%
}}
Example with two data columns
| Fiscal year | Revenue passengers | Aircraft movements |
|---|---|---|
| 2001-02 | ||
| 2002-03 | ||
| 2003-04 | ||
| 2004-05 | ||
| 2005-06 | ||
| 2006-07 | ||
| 2007-08 | ||
| 2008-09 | ||
| 2009-10 |
{{Bar chart
| title = Annual passenger and aircraft statistics
| bar_width = 20
| label_type = [[Fiscal year]]
| label1 = 2001-02
| label2 = 2002-03
| label3 = 2003-04
| label4 = 2004-05
| label5 = 2005-06
| label6 = 2006-07
| label7 = 2007-08
| label8 = 2008-09
| label9 = 2009-10
| data_type = Revenue passengers
| data_max = 66,000
| data1 = 20,194
| data2 = 22,057
| data3 = 34,794
| data4 = 49,234
| data5 = 57,732
| data6 = 64,881
| data7 = 63,904
| data8 = 54,718
| data9 = 52,210
| col2_data_type = Aircraft movements
| col2_data_max = 3,200
| col2_data1 = 2,281
| col2_data2 = 2,633
| col2_data3 = 2,664
| col2_data4 = 2,754
| col2_data5 = 3,004
| col2_data6 = 2,956
| col2_data7 = 2,912
| col2_data8 = 2,811
| col2_data9 = 2,791
}}
Template data
TemplateData for Bar chart
Data used by citation tools
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
No description.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Formatted, commented code (as of 22 Jun 2025)
<includeonly>
<!-- Outer container for the bar -->
<div class="bar-chart-bar"
{{#if: {{{width|}}} |
style="width: {{{width|40}}}em;"
}}>
<!-- Inner div for the visual bar, scaled based on value/max_value -->
<div class="bar-chart-bar-line"
style="width: {{#iferror:
{{#expr: {{{width|40}}} * {{formatnum:{{{1|300000}}}|R}} / {{formatnum:{{{2|600000}}}|R}} round 1}}
| 0
}}em;">
</div>
<!-- Text label showing the value and optional comment -->
<span class="bar-chart-bar-numbers"
{{#if: {{{width|}}} |
style="width: {{{width}}}em;"
}}>
{{nowrap|
{{formatnum: {{replace|{{{1|300000}}}|,|}}}}
{{#if: {{{comment|}}} |
<span class="bar-chart-bar-comment">({{{comment}}})</span>
}}
}}
</span>
</div>
</includeonly>
<noinclude>
{{documentation}}
</noinclude>
See also
- {{Historical populations}} (meets accessibility guidelines)
- {{Bartable}}, for use with a wrapping wikitable (supports positive and negative numbers)
- {{Bar box}}, shows bar chart with a text column after the bars or bar-pairs
- {{Composition bar}}
- {{Pie chart}}, shows pie wedges in a circular pie chart
- {{Brick chart}}, shows brick segments in a rectangular "pie chart"
- {{Vertical bar chart}} (does not meet accessibility guidelines due to the lack of alternative text)
- {{Data bars}}
- WP:Graphs
- Module:Chart, which documents a largely similar template but which works differently and seems to have been independently written with no reference to this one.