Responsive Horizontal Bar Chart

Use

Required Files

Include jQuery and required files

          
            <script src="build/js/jquery.min.js"></script>
            <script src="build/js/jquery.horizBarChart.min.js"></script>
          
        

Markup

The plugin uses the data-number attribute for the graph length.
jQuery will then cycle through all the selector's and find the one with the highest number.
That number will be used as 100% base point and make the rest of the bars relative to that number.

          
            <ul class="chart">
              <li><span class="bar" data-number="38000"></span><span class="number">38,000</span></li>
              <li><span class="bar" data-number="134000"></span><span class="number">134,000</span></li>
            </ul>
          
        

Code

Simplest way to use is create the following markup and just call .horizBarChart() on your containing element.

          
            $('.chart').horizBarChart();
          
        

Options

The following are the available options and default values.

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

Example