Responsive Customizable Bar Indicator with jQuery - Bars.js

Bars.js is a lightweight jQuery plugin that enables you visualize numeric data into responsive, dynamic, fully styleable bar indicators.

See also:

• jQuery plugin To Visualize Numeric Data - Bar Indicator
• Simple Bar Chart Plugin with jQuery and Bootstrap - jchart
• Responsive Animated Bar Chart with jQuery - Horizontal Chart
• jQuery Plugin To Create Animated Skill & Experience Bars - Skillset.js

How to use it:

1. Load the required CSS file bar.css in the head section of the document.

<link href="bars.css" rel="stylesheet">

2. Load the JavaScript file Bars.js after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="bars.js"></script>

3. Visualize the numeric data wrapper in the DIV elements into a bar group. By default, Bars.js finds the highest value in a bar group and bases the comparison on that. All CSS helper:

• thin: thin bars
• thick: thick bars
• n_bg: no background
• gradient: gradient colors
• c_red: custom colors. c_red, c_green, c_blue, c_pink, or c_brown
• elastic: elastic animation

<div class='bar_group'>
  <div class='bar_group__bar thin' value='230'></div>
  <div class='bar_group__bar thin' value='130'></div>
  <div class='bar_group__bar thin' value='160'></div>
  <div class='bar_group__bar thin' value='340'></div>
  <div class='bar_group__bar thin' value='290'></div>
</div>

4. Show labels, tooltips, values and units on the bars.

<div class="bar_group__bar thin" label="Vuaxhall Corsa" show_values="true" unit="mpg" value="343"></div>
<div class="bar_group__bar thin" label="Toyota Celica" show_values="true" unit="mpg" value="235"></div>
<div class="bar_group__bar thin" label="Landrover" show_values="true" unit="mpg" value="675"></div>
<div class="bar_group__bar thin" label="Peagueot 106" show_values="true" unit="mpg" value="456"></div>
<div class="bar_group__bar thin" label="Lawnmower" show_values="true" unit="mpg" value="245"></div>

---

This awesome jQuery plugin is developed by jcoulterdesign. For more Advanced Usages, please check the demo page or visit the official website.