Bar.js Demos

Scroll down the page

Bar styles

Pre-built bar themes, more to come soon!

Thin Bars

.bar_group__bar.thin

Thick Bars

.bar_group__bar.thick

Bars with no background

.bar_group__bar.n_bg

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'

Colors

Setting color schemes

Gradient bars

.bar_group__bar.thin.gradient

Custom colors

Assign a new css selector

Effects

Snazzy effects for extra swag

Elastic

.elastic