The horizontal bar chart plug-in for jQuery
For creating the horizontal bar chart plug-in, you may use a jQuery solution hBarChart. This solution requires using the HTML lists where each <li> represents a bar.
Developer’s page Download plug-in
How to use the hBarChart plug-in?
Download this lightweight plug-in from the GitHub website by the above download link or visit the developer’s page.
Include the reference of the horizontal bar chart plug-in:
(Place this line after the jQuery reference)
See the demos below for the markup using the Bootstrap framework.
Initiate the plug-in with default options:
A demo of a bar chart with default settings
In this example, the bar chart is created with the default settings. See the markup and code below:
The markup and script:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="js/jquery-hBarChart/hBarChart.js">
</script>
<script>
$(function() {
$(".horizontal-chart-demo").hBarChart();
})
</script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
A demo of horizontal chart with default settings
</h3>
</div>
<div class="panel-body">
<div>
<ul class="horizontal-chart-demo">
<li data-data="1230">
Java
</li>
<li data-data="1300">
Python
</li>
<li data-data="1300">
C Sharp
</li>
<li data-data="880">
Oracle
</li>
<li data-data="680">
MS SQL Server
</li>
<li data-data="1050">
MySQL
</li>
<li data-data="1500">
PHP
</li>
<li data-data="700">
JSP
</li>
<li data-data="500">
Ruby
</li>
</ul>
</div>
</div>
</div>
</div>
<!--6 end -->
</div>
</div>
</section>
<!-- chart1 -->
</body>
</html>
Customizing the plug-in by using options
The plug-in allows you to change the color of the bars with limitations.
You may change the color and text of the bar with maximum value. While all other bars will be given one color.
However, the good thing is that the color will become lighter as the bars go down.
To change the color of all bars, use these options:
bgColor: ‘#418383’, //Color name or hexadecimal color value
textColor: ‘#FFD5BF’,
For the max bar:
maxStyle: {
bg: ‘#BF0000’, // Color name or hexadecimal color value
text: ‘#FFFF82’
}
For the demo below, I used the false value:
The code for this example:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="js/jquery-hBarChart/hBarChart.js">
</script>
<script>
$(function() {
$(".horizontal-chart-demo").hBarChart({
bgColor: '#418383',
textColor: '#FFD5BF',
show: 'data',
sorting: false,
maxStyle: {
bg: '#BF0000',
text: '#FFFF82'
}
});
})
</script>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
A demo of horizontal chart with custom settings
</h3>
</div>
<div class="panel-body">
<div>
<ul class="horizontal-chart-demo">
<li data-data="1430">
Java
</li>
<li data-data="1300">
Python
</li>
<li data-data="1100">
C Sharp
</li>
<li data-data="880">
Oracle
</li>
<li data-data="680">
MS SQL Server
</li>
<li data-data="1050">
MySQL
</li>
<li data-data="1500">
PHP
</li>
<li data-data="700">
JSP
</li>
<li data-data="500">
Ruby
</li>
</ul>
</div>
</div>
</div>
</div>
<!--6 end -->
</div>
</div>
</section>
<!-- chart1 -->
</body>
</html>
Read more about this nice and simple plug-in by visiting the developer’s page.