Responsive Animated Bar Chart with jQuery - Horizontal Chart

Horizontal Chart is a super simple jQuery plugin used to create a responsive & animated bar chart. The plugin will cycle through all the numbers of graph length defined in the data-number attribute and set highest number and use that as 100%. This will always make sure the graph is a decent size and all numbers are relative to each other.

How to use it:

1. Include jQuery Javascript library and the jQuery horizontal chart plugin in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/horizBarChart.js"></script>

2. Create a Html list for the horizontal bar chart and set the graph length using data-number attribute for each bar.

<ul class="chart">
  <li class="title" title="My Bar Chart"></li>
  <li class="current" title="Label 1"><span class="bar" data-number="38000"></span><span class="number">38,000</span></li>
  <li class="past" title="Label 2"><span class="bar" data-number="28500"></span><span class="number">28,500</span></li>
  <li class="past" title="Label 3"><span class="bar" data-number="18500"></span><span class="number">18,500</span></li>
  <li class="past" title="Label 4"><span class="bar" data-number="8000"></span><span class="number">8,000</span></li>
  <li class="past" title="Label 5"><span class="bar" data-number="14000"></span><span class="number">14,000</span></li>
  <li class="past" title="Label 6"><span class="bar" data-number="24000"></span><span class="number">24,000</span></li>
  <li class="past" title="Label 7"><span class="bar" data-number="34000"></span><span class="number">34,000</span></li>
  <li class="past" title="Label 8"><span class="bar" data-number="12000"></span><span class="number">12,000</span></li>
  <li class="past" title="Label 9"><span class="bar" data-number="14000"></span><span class="number">14,000</span></li>
</ul>

3. Initialize the plugin with default settings.

$(document).ready(function(){
$('.chart').horizBarChart({
  selector: '.bar',
  speed: 3000
});
});

4. Style the bar chart whatever you like.

.chart-horiz .chart { width: 90% }

.chart-horiz .chart li {
  display: block;
  height: 23px;
  margin-top: 3px;
  position: relative
}

.chart-horiz .chart li:before {
  color: #fff;
  content: attr(title);
  left: 5px;
  position: absolute
}

.chart-horiz .chart li.title:before {
  color: black;
  font-weight: bold;
  left: 0
}

.chart-horiz .chart li:first-child { margin-top: 0 }

.chart-horiz .chart li .bar {
  background: #27ae60;
  height: 100%;
  min-width: 164px
}

.chart-horiz .chart li .number {
  color: #27ae60;
  font-size: 18px;
  font-weight: bold;
  padding-left: 5px;
  position: absolute;
  top: -3px
}

.chart-horiz .chart li.past .bar { background: #2ecc71 }

.chart-horiz .chart li.past .number { color: #2ecc71 }

Change logs:

2015-03-29

• update

2014-11-01

• update

2014-10-31

• Fixed merge conflict
• Added some stlying for better mobile viewing

---

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