Bar.js Demos

Scroll down the page

Bar styles

Pre-built bar themes, more to come soon!

Thin Bars


Thick Bars


Bars with no background


Value options

Setting maximum values

Default max

By default, Bars.js finds the highest value in a bar group and bases the comparison on that

Defined max of 500

If you want to change the maximum of the bar the group add {:max => 'Your max'} to the bar group element

Display option

Show max/min values, tooltips and more.

Show data labels

:label => 'Hunger'

Show values

:show_values => 'true'

Custom unit of measure

:unit => '% etc'

Show tooltips

:tooltip => 'true'


Setting color schemes

Gradient bars


Custom colors

Assign a new css selector


Snazzy effects for extra swag