hBarChart.github.io

Version: 1.0
Add jQuery first and then add hBarChart.js

Default Settings

    
    <ul class="chart1">
        <li data-data="1330">ABC</li>
        <li data-data="1600">CDE</li>
        <li data-data="550">MMC</li>
        <li data-data="420">IJK</li>
        <li data-data="780">IJK</li>
        <li data-data="250">IJK</li>
        <li data-data="1800">IJK</li>
        <li data-data="300">IJK</li>
        <li data-data="900">IJK</li>
    </ul>
    
      $("ul.chart").hBarChart();

Customize 1

                 
  
  <ul class="chart1">
      <li data-data="1330">ABC</li>
      <li data-data="1600">CDE</li>
      <li data-data="550">MMC</li>
      <li data-data="420">IJK</li>
      <li data-data="780">IJK</li>
      <li data-data="250">IJK</li>
      <li data-data="1800">IJK</li>
      <li data-data="300">IJK</li>
      <li data-data="900">IJK</li>
  </ul>
              
  $("ul.chart1").hBarChart({
        bgColor: '#C000',
        textColor: '#fff',
        show: 'data',
        sorting: true,
        maxStyle: {
            bg: 'orange',
            text: 'white'
        }
  });

Available Options

Option	Type	Default	Remarks
bgColor	string	green	For set background color of each bar. Here you can use color name or hex value of color
textColor	string	white	For set text color of each bar. Here you can use color name or hex value of color
show	string	label	Set label or data or both. Available: label,data,both
sorting	boolean	true	Set your chart will be sorted or not according to your data
maxStyle	object	{ bg: 'orange', text: 'white' }	You can style your maximum value bar.