jqBarGraph – jQuery graph plugin

jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

jQuery Bar Graph

Of course, there are a lot of settings to tune appearance of your graph, as are animation, color scheme, dimensions etc. Also, you can additionally change look and feel of graph via CSS.

You will need jQuery in order to make jqBarGraph working. First, you need to download jQuery and jqBarGraph plugin and include them on your page. Similar to this:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqBarGraph.js" type="text/javascript"></script>

Now, we need array of data from which we want to create graph. There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.

For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. This is example for simple bar graph type:

arrayOfData = new Array(

For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, …, valueN], label]. It should look similar to this:

arrayOfData = new Array(

After you set your data array you just need to say in which div you want graph to be created. All you have to do is:

$('#divForGraph').jqBarGraph({ data: arrayOfData }); 

The code above is enough to display your data as bar graph. But if you want to made your graph prettier you can achieve that with next set of parameters:

data: arrayOfData, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#000000', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part 
showValuesColor: '#fff' // color of font for values

This graph will work without any additional CSS, but it can easily be styled via CSS. I was paying attention that you will have enough selectors to achieve anything you want with CSS. If you create something cool it will be nice if you share that with all of us.



* Compatibility with jQuery 1.4.2+

  • Image gallery with fancy transitions effects (1025)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • News Ticker in 4 lines of jQuery (92)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code […]
  • Gradienter: Add gradient to elements (22)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • mooBarGraph: AJAX graph for MooTools (17)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]

157 comments on "jqBarGraph – jQuery graph plugin"

Hi there,

I am using your plugin. First of all thanks for the help. I manipulated some elements and made a custom capsule bar stacked charts. However, I am not able to show the tooltip on the bars. I know there’s showValues option is available but that defeats my design.

Taksh on November 24, 2014 at 1:56 pm

The comment thread is pretty old, but just in case it helps anyone

1) The problem with the 0 bars (which show as one) can be dealed with using css, set the main font to 0.
font-size: 0;

font-size:13 !important;

2) For me it works in IE9 & 10 and even.. IE7! You’ll need above trick though

3) The only way to remove the total was to make a change in the js file

4) One simple way I used to display axes was to set small borders, create a div on the left and put a 0 on the bottom and the max value that is calculate in the js anyway at the top (using jquery). It’s not a precise scale, but at least you’ll have some indication of values without values.

5) TBQH: if you do not want a bar chart with values at the top, either you’ll need to do some programming or pick another plugin. This one does exactly what it says, does it in a nice way and has some nice extra features (especially the stacked graph which is very useful and pretty uncommon), but it does just that. So if the examples on the example page do not match your use case, search elsewhere.

6) Thank you very much for making this available!

Anna on November 3, 2014 at 4:24 pm

Is it possible to remove the total at the top of stacked columns?

Øyvind on November 27, 2013 at 8:07 am

Could u please tell me how to design bar graphs in 3D view.
Is it possible with this js library?

Pavan Tej on November 5, 2013 at 3:05 am

uncompatible with ie9

shark on October 25, 2013 at 1:28 am

uncompatible with ie10

shark on October 24, 2013 at 10:38 pm

Amazing! This blog looks exactly like my old one! It’s on a entirely different topic but it has pretty much the same layout and design.
Outstanding choice of colors!

Ipswich Demolition Specialist on October 13, 2013 at 6:13 pm

Hi is this bar charts can be live editable, and can it possible to align horizontally.
Like I am thinking in this way if I am changing some values in the input the bar charts can be live rendered? any option we can do like this.

summy on October 7, 2013 at 5:56 am

Great bit of kit guys…

However wondering if any of yous can help me. got it working great on my test website but as soon as i try and load a graph on my SquareSpace.com website it prints the code and not the graph. I notice that if i dont used stacked data it draws the graph but the legend are NaN.

Have a look and if anyone can sole it would appreciate it:


Lee on October 4, 2013 at 4:07 pm


I am facing some issues while using jqBarGraph.The issue description as follows.If my array of data having 0(zero) means the chart(bar for that particular date) is not plotted on axis.It is plotting above the ground level.Can you help me please?


Sivaramakrishnan C on August 28, 2013 at 7:08 am

Hi sir,
I have a question on “jqBarGraph” plugin . I am trying to show a tool tip when the user will mouseover on the graph. Could u please help me on this?


Anmul on August 28, 2013 at 6:22 am

Does this plugin work with jQuery 1.3.2 ?

Apurv on August 14, 2013 at 4:06 am

arrayOfData = new Array(


data: arrayOfDataJS,
// data:arrayOfDataJS,
//title: “This is the title and Bold is working”,
// barSpace:5,
//postfix: ‘Year’,


Just tried to execute above simple code…But I get an error in my console arrayOfData is not defined:uncght reference error

riyaz on July 22, 2013 at 4:34 pm

@Erdrick could u send me a zip of the updated code and samples… i would love to check it out @{ sojimaxi at yahoo dot co dot uk}

Sojimaxi on July 18, 2013 at 1:31 am

can i place the graphs horizontaly?

BJ on June 25, 2013 at 11:15 am

Hi, thanks for your plugin. It works great.
I’m using it for a donation meter type of functionality.

It’s a simple 1 stacked bar with values of [$amnt, (1000-$amnt)]
So it shows the amount raised so far as a percentage of the goal.

In the presentation it would be great if I could display the “goal” of $1000 instead of the “remainder”.

I’m currently using a contribution from the repository which shows the total value, but it’s not ideal (maybe if it could be rounded) like the inside values.

Any ideas would be much appreciated, and again thanks for your code.

jimlong on June 19, 2013 at 12:40 am

The bar graph shows the graph for value 0 higher than 1. the issue is only with 0

Balaji on June 11, 2013 at 5:14 am

I like this plugin, it is working perfectly in my app but I have faced one problem i.e. I am using some other framework for pie/line chart and it is not working when I add your plugin.
And I have noticed jquery.js is in your code and if I use some other jquery.js file then your one is also not working. Please let me know how I will resolve this issue/ please suggest me some plugin which will work with your plugin.


Subha on June 7, 2013 at 6:41 am

for 0 values than bar is showing longer height that lower values like 1

Balaji on May 27, 2013 at 6:07 am

how to scale the bars to fit the screen

Balaji on May 27, 2013 at 5:54 am

where should i place jqBarGraph jquery plug-in after downloading

shivani on May 5, 2013 at 11:42 pm

Leave a Reply

Your email address will not be published. Required fields are marked *