Customizable HTML5 Horizontal Bar Chart Plugin With jQuery - hBarChart

File Size: 4.81 KB
Views Total: 2998
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">
  <li data-data="90">
  <li data-data="90">
  <li data-data="80">
  <li data-data="70">
      AngularJS 1.x / 2.x
  <li data-data="80">
      React / React Native
  <li data-data="50">
      Vue.js 1.x / 2.x
  <li data-data="60">
      UI / UX
  <li data-data="10">
      Graphic Design

3. Initialize the bar chart as follow:

$(function() {

4. All plugin options to customize the bar chart.


  // 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.