Template talk:Bar box

Margins

I have deployed the fix of tright to skins other than monobook now. White borders are no longer used for the margins, and true margins have been added, fixing this template for uses in skins other than Monobook. —TheDJ (talk • contribs) 20:22, 17 January 2010 (UTC)[reply]

Problems with Chrome

This template seems to have graphical issues with Google Chrome. It does not show bars smaller than 1% (other browsers do) and words are closer to its margins. --95.236.227.241 (talk) 12:48, 3 June 2012 (UTC)[reply]

How to insert vertical gap?

Sometimes the items have a inherent grouping (spring/summer/... smoker/non-smoker whatever). A small vertical space would make the structure obvious to the viewer. Bar box does not seem to support this feature (empty line(s), br token, empty items - none of these seem to work). How can it be done? --HeWhoMowedTheLawn (talk) 19:14, 21 August 2012 (UTC)[reply]

is this what you want? Frietjes (talk) 21:04, 21 August 2012 (UTC)[reply]

Quantity of stuff

kinds of stuff				pcs.
Foobar			33,213
Barfoo			123,123
Bazbar			210,121
Barfoobaz			12,854
Some stuff displayed by quantity.

or this

Quantity of stuff

kinds of stuff				pcs.
Foobar			33,213
Barfoo			123,123
Bazbar			210,121
Barfoobaz			12,854
Some stuff displayed by quantity.

Yes! Great!) Thanks. I'd likely prefer the first (to my taste height=8 seems enough for a clear separation) --HeWhoMowedTheLawn (talk) 17:59, 22 August 2012 (UTC)[reply]

How to add values to the "right1" column ?

Is there any way to add values to the "right1" column without using two "percent bars" like in the "election results" example ? I have tried everything I can to make it show as I want it to show (that being showing percent in the "right1" and additional info in the "right2"), but for some reason it will simply not display any information in the "right1" no matter what and where I place the data, it just defaults to the "right2" and will not add anything to the "right1"... or maybe I'm doing something wrong here :/
Also, is there a way to increase the "width" of the bars themselves, since at the moment even with 100% they are too short, I have tried adding "width=<value>" but it doesn't seem to do anything...

just random title

names			percent	additional info
Foobar			33%	note 1
Barfoo			65%	note 2
Bazbar			100%	note 3
Barfoobaz			13%	note 4
Some stuff displayed by quantity.

you can set the bar width using |barwidth=. Frietjes (talk) 20:32, 9 September 2015 (UTC)[reply]

PYX-340, updated your example with the new |note=. Frietjes (talk) 20:47, 9 September 2015 (UTC)[reply]

Thank you very much good sir ! PYX-340 (talk) 22:58, 9 September 2015 (UTC)[reply]

How to use comma as decimal divider?

How to use comma as decimal divider not dot? Softy (talk) 15:09, 26 November 2015 (UTC)[reply]

see MOS:DECIMAL. Frietjes (talk) 17:15, 30 November 2015 (UTC)[reply]

Narrow color bar mobile version wrap issue

On mobile version when the color bar effective width value is small enough, the color bar appears to be twice higher. —Mykhal (talk) 17:18, 22 October 2017 (UTC)[reply]

A fix: Template_talk:Bar_percent#Edit_request_2 —Mykhal (talk) 17:32, 22 October 2017 (UTC)[reply]

Does this template accepting stacking?

Like { { Graph:Chart | type=stackedrect } }, but horizontal. — Guarapiranga (talk) 08:23, 30 September 2019 (UTC)[reply]

Found what I wanted, here. — Guarapiranga (talk) 02:25, 1 October 2019 (UTC)[reply]

@Guarapiranga: You could also use {{bar stacked}}. Alexiscoutinho (talk) 20:41, 3 March 2020 (UTC)[reply]

Consensus about paddings and alignments

Every bar template has a different way of adding padding and aligning the 1st, 2nd, 4th and 5th columns. We need to reach a consensus. Which padding scheme do you prefer?

A) | 0.4+0.4em 1st-col 0.4+0.4em 2nd-col 0.4    em | BAR |     0.4em 4th-col 0.4+0.4em 5th-col 0.4+0.4em |
B) | 0.4+0.4em 1st-col 0.2+0.2em 2nd-col 0.4    em | BAR |     0.4em 4th-col 0.2+0.2em 5th-col 0.4+0.4em |
C) | 0.4    em 1st-col     0.4em 2nd-col 0.4    em | BAR |     0.4em 4th-col 0.4    em 5th-col     0.4em |
D) | 0.4+0.4em 1st-col 0.4+0.4em 2nd-col 0.8    em | BAR |     0.8em 4th-col 0.4+0.4em 5th-col 0.4+0.4em |
N) | 0.4+0.4em 1st-col 0.4+0.4em 2nd-col 0.4+0.4em | BAR | 0.4+0.4em 4th-col 0.4+0.4em 5th-col 0.4+0.4em |

Which text-align scheme do you prefer?

A) |  left  right  | BAR |  left  right  |
B) |  left   left  | BAR |  left   left  |
C) | right  right  | BAR | right  right  |
D) | center center | BAR | center center |

Alexiscoutinho (talk) 21:18, 3 March 2020 (UTC)[reply]

@Alexiscountinho: Not sure what either look like – could examples be given for each option please? WT79 The Engineer (talk) 14:59, 19 April 2020 (UTC)[reply]

@WT79 The Engineer:

1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col

Looking this way, I think padding scheme N is the best because it leaves the columns symmetrical and the spaces between info constant! I wonder if its third <td> can be merged with the child <div>... Using this scheme to compare the text-align schemes:

1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col
1st-col	2nd-col	​	4th-col	5th-col

I personally like scheme D, but, as a default, I think A would be more appropriate. Opinions? Alexiscoutinho (talk) 20:13, 23 September 2020 (UTC)[reply]

Thanks. I think I have the same opinion about padding (N), but I think I prefer A for the text alignment – it looks weird having the bar different to the rest of the column, but in most graphs this is how you would want it. WT79 ^{(speak to me | editing patterns | what I been doing)} 06:54, 24 September 2020 (UTC)[reply]

Template-protected edit request on 3 March 2020

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

Make left1, left2, right1 and right2 have dynamic colspan to match the bar templates. See Bar stacked's lines 2 and 3, for example. This is important because, without it, it's impossible to centralize a single left column header (as seen in this template at the "Date"). Furthermore, the current implementation creates a dummy space if the column is not used (as seen in here on the right side of "# of cases (including C.D.)"). Alexiscoutinho (talk) 22:15, 3 March 2020 (UTC)[reply]

 Not done: please make your requested changes to the template's sandbox first; see WP:TESTCASES. Izno (talk) 03:28, 5 March 2020 (UTC)[reply]

@Izno: Updated the sandbox to contain the edit request + an include tag improvement. The test cases don't actually test the column headers which I changed, thus all comparisons looked the same. Alexiscoutinho (talk) 06:14, 5 March 2020 (UTC)[reply]

@Izno: So... Alexiscoutinho (talk) 04:28, 10 March 2020 (UTC)[reply]

To editor Alexiscoutinho:  done with /includeonly and noinclude tags in accord with WP:INCLUDEONLY. P.I. Ellsworth  ed. ^put'r there 02:00, 13 March 2020 (UTC)[reply]

Dark mode

This template displays the same in light mode and dark mode. This means the text is still readable, but it is intensely bright on an otherwise dark screen. Is there any way to make the template more compatible with dark mode, without potentially making a darkly-colored bar unreadable? (see Template:Bar box/testcases in dark mode) Ping for Jdlrobson who recently fixed accessibility in dark mode on this template, Rjjⁱⁱⁱ (talk) 00:11, 1 August 2024 (UTC)[reply]

I am not the ping you are looking for :) Right now thr project focus should be on making content readable/accessible in dark mode across all Wikimedia projects even if the shortest path is making it look the same as in light theme. Making all templates themeable as you are requesting is likely a multiyear project and best done by the people that build and know the templates (I am not familiar with this one).

Template editors are pretty oversubscribed as is, so any suggested amendments to the template to make them work better in dark mode would likely be appreciated. See Template:Edit fully-protected. 🐸 Jdlrobson (talk) 00:48, 1 August 2024 (UTC)[reply]

Gotcha, thanks for the explanation, Rjjⁱⁱⁱ (talk) 00:28, 2 August 2024 (UTC)[reply]

Template-protected edit request on 6 February 2025

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

Please change

background: {{{background-color|white}}}; color: black

(line 2) to

background: {{{background-color|var(--background-color-neutral-subtle,white)}}}; color: var(--color-base,black)

so that dark mode users aren't flashbanged by this template. Thanks. '''[[User:CanonNi]]''' (talk • contribs) 08:02, 6 February 2025 (UTC)[reply]

Does Template:Bar box/sandbox contain the required changes? If so, can you confirm you have tested and it is working correctly? — Martin (MSGJ · talk) 12:50, 7 February 2025 (UTC)[reply]

CanonNi I modified the sandbox, but the background color is still pretty white. Is that supposed to be the case? See Template:Bar box/testcases SWinxy (talk) 19:57, 17 February 2025 (UTC)[reply]

Looks like Sohom Datta has already done this. * Pppery * _{it has begun...} 22:10, 24 February 2025 (UTC)[reply]

Printing

All of the bars are invisible when printed. Rjjⁱⁱⁱ (talk) 00:09, 8 February 2025 (UTC)[reply]

Sync with sandbox

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

There are some accessibility improvements on Template:Bar box/sandbox (<div> for table's wrapper styling instead of <table>, <caption> for table's description instead of <th>, <th> for table headers instead of <td>, accessible font size for the table headers row). Please sync this template with it. sapphaline (talk) 14:32, 7 November 2025 (UTC)[reply]

 Not done: please make your requested changes to the template's sandbox first; see WP:TESTCASES. Where are the new testcases? What is happening in Test cases 5 and 6 that makes the box go outside the larger box? Why are the bars smaller and moved to the right in Test cases 5 through 8? Also, is there consensus to increase the text size? A font size of 88% is within the MOS requirements. – Jonesey95 (talk) 19:04, 7 November 2025 (UTC)[reply]

A font size of 88% is within the MOS requirements - it's 88% in 88%. sapphaline (talk) 19:19, 7 November 2025 (UTC)[reply]

Apparently that's only for table header row. sapphaline (talk) 19:45, 7 November 2025 (UTC)[reply]

Why are the bars smaller - their width is in %, which decreases if you increase the font size. and moved to the right in Test cases 5 through 8? - their width is in em, which increases with the font size (obviously). sapphaline (talk) 19:29, 7 November 2025 (UTC)[reply]

What is happening in Test cases 5 and 6 that makes the box go outside the larger box? - that also happens in the sandbox preview with the live template code, so that's a {{Test case}} problem. sapphaline (talk) 19:47, 7 November 2025 (UTC)[reply]

Reactivating this request as font-size:88% on the wrapper <div> fixes cell width problems while remaining MOS:SMALL compliant, and What is happening in Test cases 5 and 6 that makes the box go outside the larger box isn't something I can solve within this template. sapphaline (talk) 19:54, 7 November 2025 (UTC)[reply]

 Done. Thanks for adjusting the font-size to match the current template. I tested the "bar box overlapping the bottom of the test case box" using the live template as the second template, and it happened with the live template also, so I think you are correct that there is some possible issue with {{test case}}. – Jonesey95 (talk) 16:01, 8 November 2025 (UTC)[reply]

Add scope="col" to cell headers

It is requested that an edit be made to the template-protected template at Template:Bar box. (edit · history · last · links · sandbox · edit sandbox · sandbox history · sandbox last edit · sandbox diff · test cases · transclusion count · protection log) This template must be followed by a complete and specific description of the request, so that an editor unfamiliar with the subject matter could complete the requested edit immediately. Edit requests to template-protected pages should only be used for edits that are either uncontroversial or supported by consensus. If the proposed edit might be controversial, discuss it on the protected page's talk page before using this template. Consider making changes first to the template's sandbox and test them thoroughly here before submitting an edit request. To request that a page be protected or unprotected, make a protection request. When the request has been completed or denied, please add the |answered=yes parameter to deactivate the template.

Apparently there are some issues with browsers thinking they're row headers, probably because of empty spacer cell. sapphaline (talk) 09:58, 9 November 2025 (UTC)[reply]

 Not done: it's not clear what changes you want to be made. Please mention the specific changes in a "change X to Y" format and provide a reliable source if appropriate. Or edit the sandbox. – Jonesey95 (talk) 13:54, 9 November 2025 (UTC)[reply]

special:diff/1321250469. sapphaline (talk) 15:14, 9 November 2025 (UTC)[reply]

Template-protected edit request on 10 November 2025

It is requested that an edit be made to the template-protected template at Template:Bar box. (edit · history · last · links · sandbox · edit sandbox · sandbox history · sandbox last edit · sandbox diff · test cases · transclusion count · protection log) This template must be followed by a complete and specific description of the request, so that an editor unfamiliar with the subject matter could complete the requested edit immediately. Edit requests to template-protected pages should only be used for edits that are either uncontroversial or supported by consensus. If the proposed edit might be controversial, discuss it on the protected page's talk page before using this template. Consider making changes first to the template's sandbox and test them thoroughly here before submitting an edit request. To request that a page be protected or unprotected, make a protection request. When the request has been completed or denied, please add the |answered=yes parameter to deactivate the template.

This template has a dark mode problem. Due to the use of a specified background-color, the text inside this template displays as black-on-black when viewed in Vector (2022) dark mode. It is unreadable.

The particular problem area seems to be var(--background-color-neutral-subtle,white).

I would advise that a template editor or admin adjust the bar box style code to either have a dark mode switch or to entirely remove the background colour preset, so that it is readable and displays with contrasted text when read in dark mode. Drunk Experiter (she/her) (talk) 23:08, 10 November 2025 (UTC)[reply]

Lint error

In the list of missing caption end tags, as of now, all of them are coming from this template, and it seems that all of them are when the |title= parameter has a reference at the end. I would make an edit request, but I'm not sure exactly what's wrong with the template or how it would be fixed. dot.py 16:28, 20 November 2025 (UTC)[reply]

The first one I looked at had the bars in the title= parameter. I fixed it by adding the missing |bars= parameter. I'll look at the rest. (edited to add: Yes, that was the problem with all four of the articles.) – Jonesey95 (talk) 22:09, 20 November 2025 (UTC)[reply]

Thank you! I was just assuming that it was the referencing, because that’s what I saw they all had in common dot.py 22:17, 20 November 2025 (UTC)[reply]