Why does bar graph get inverted when I use it in a infobox?

Question

The code for the page is

{{Infobox course
| course_code = PH31011
| course_name = Quantum Mechanics I
| department = [[Physics]]
| credits = 4
| ltp = {{Data bars
         | columns = 6 | Jan| Feb| Mar| Apr| May| Jun
         | blue|Berries|  65|  38|  72|  47|  20|  30  
        }}
}}

{{Data bars
| columns = 6 | Jan| Feb| Mar| Apr| May| Jun
| blue|Berries|  65|  38|  72|  47|  20|  30    
}}

Why does the graph display inverted bars when used in the infobox?

• Both Graphs Images
• Demo page

Answer 1

This is a CSS issue, and not really related to MediaWiki itself, but to a stylesheet created by the Wikimedia community. There is a css rule in MediaWiki:Common.css (user created CSS loaded for all skins) on that wiki that looks like this:

.infobox th[scope=row], .infobox td {
   vertical-align: top;
}

That rule overrides the vertical align of the bar. A quick and dirty fix would be to change vertical-align: bottom; to vertical-align: bottom !important; for each column in Template:Data_bars.

As always, you risk messing up some other edge case if you do that on a production wiki, so you should probably raise the question on the talk page first.