Customizable HTML5 Horizontal Bar Chart Plugin With jQuery - hBarChart

hBarChart is a very small jQuery plugin used to create a fully configurable, horizontal bar chart using plain html unordered list and HTML5 data attributes. Great for skill / experience bars.

How to use it:

1. Import jQuery library and the jQuery hBarChart plugin's script into the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="hBarChart.js"></script>

2. Create a normal html unordered list and specify the values to be presented in the bar chart using HTML5 data-data attribute as follow:

<ul class="chart">
  <li data-data="99">
      jQuery
  </li>
  <li data-data="90">
      JavaScript
  </li>
  <li data-data="90">
      HTML5
  </li>
  <li data-data="80">
      CSS/CSS3
  </li>
  <li data-data="70">
      AngularJS 1.x / 2.x
  </li>
  <li data-data="80">
      React / React Native
  </li>
  <li data-data="50">
      Vue.js 1.x / 2.x
  </li>
  <li data-data="60">
      UI / UX
  </li>
  <li data-data="10">
      Graphic Design
  </li>
</ul>

3. Initialize the bar chart as follow:

$(function() {
  $("ul.chart").hBarChart();
})

4. All plugin options to customize the bar chart.

$("ul.chart").hBarChart({

  // background color
  bgColor: 'green',

  // text color
  textColor: '#fff',

  // label,data,both
  show: 'label',

  // re-sort according to your data
  sorting: true,

  // style your maximum value bar
  maxStyle: {
    bg: 'orange',
    text: 'white'
  }
  
});

---

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