jQuery bar chart/graph plug-in: 2 demos

The bar graph plug-in

The jquery-graph is a simple to use jQuery plug-in for creating bar graphs On your website. It simply requires adding the plug-in JS file, CSS file and use a few attributes in HTML table as shown in the live examples below.

The plug-in can be downloaded from the Github website here or you may view source the demo page and find the graph.js, bar.css, and style.css in the jquery-graph folders. Just download these files in your system.

A demo of bar chart by using jQuery plug-in

See the demo online where a few development tools and technologies are used to present the skill level by using the bar chart.

jquery bar graph

See online demo and code

You need to include the following CSS files for the demo like look in the <head> section:

  <link rel=”stylesheet” href=”css/jquery-graph/style.css”>

<link rel=”stylesheet” href=”css/jquery-graph/bar.css”>

Just above the </body> tag:

 <script src=”http://code.jquery.com/jquery-1.12.4.min.js”></script>

<script src=”js/jquery-graph/graph.js”></script>

The markup:


How to change the default colors of the bars?

The bars colors are managed in the bar.css file. Just open that file in any editor of your choice and find the classes starting with fig.

For example, look at this demo where I changed the default scheme of Java, Python, CSS, and Bootstrap than the default style. Have a look and I will explain which classes are changed exactly:

jquery bar graph custom

See online demo and code

Only these classes background color are changed with the new values in the bar.css file:


Similarly, you may change other properties for other bars and display text to customize this bar chart plug-in to match the theme of your website.

Credit: atoyansk