Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Support for bar charts with keys instead of x-axis values #106

dnschnur opened this Issue · 20 comments

2 participants


Original author: (March 06, 2008 10:11:16)

I'm using Flot on SVN, or by the way Flot 0.3. Firefox 2 on Ubuntu.

When giving more the one serie with "bars : {show : true}" I see the bars
of the different series for the same x-value overlapping : I mean the bars
are one on each other. Is there any way (ie. any "bars" option) to say to
draw the bars one next to eachother for the same x-value instead?

I read more times the API, the issues, the samples and whatever but I
couldn't find anything that could help me.

Thank you.

Original issue:


From on March 06, 2008 15:09:46
Sorry, it's not currently easy to do that. You'll have to do it by hand for now. It's
on the TODO (as "bar charts with keys instead of x values"). Patches are welcome. :-)

There was a thread about it here:


From on March 11, 2008 20:24:38
Look at my demo page and see if it is the solution.


From on September 22, 2008 07:47:21
Hi, I am a newbie to this charts, can you provide the unpacked version of
jquery.flot.js file for this and also placing the x-axis ticks at that particular
bars.I have taken the latest flot.js but the ticks are not being placed at correct
positions.It will be helpful if you provide the fix for placing the ticks at correct


From on September 25, 2008 17:55:02
The demo from trieutn places bars from different series side-by-side (as would be
expected for bar charts). However, trieutn's javascript is packed so it's basically
impossible to see what was done to bring about this change. Perhaps a patch could be
submitted instead?


From on December 09, 2008 14:36:15
Take a look at this link:, and grab
the diff file I posted there.


From on March 16, 2009 18:13:01
If and when this feature is implemented, please be careful to include a way to
continue to display bars overlapping. When displaying current year against previous
year, we almost always want to plot the previous year (overlaid and with a slightly
smaller width) in the same physical location as the bar for the current year, and
would not want to lose this important ability.


From on May 15, 2009 14:21:26
I started with the above code and made a version of flot with parallel bars as well
as showing the tooltip points on the bars. One thing that wasn't sure how to do was
with the extending of the chart to cope with additional series so just put in a
calculation which works in most cases. Attached is my file.

Harel Seligmann


From on May 15, 2009 15:03:07
To add to the above - was working with the latest version of flot


From on May 17, 2009 01:12:03
I'm just starting to get into flot, and need to do a multi-bar graph. When I use the

jquery.flotbar.js, I get an error:

Uncaught TypeError: Cannot call method 'push' of undefined
Line 1635.

Am I missing something?? Is there some documentation on how to get bars to be
parallel (ie, anything different in bar settings...)

Thanks for the help.


From on May 19, 2009 09:37:03
Hi there

Haven't come across that error before. Do you get it if you are just using the
standard version of the flot javascript file. Attached is a demo page I have done
including the parallel bars. I have also found minor glitch which I have fixed so
use the attached javascript file rather.



From on May 20, 2009 10:58:01
Have done some bug fixes and also used the autoscaleMargin to extend the chart as
necessary which does the trick for extending the graph correctly.


From on October 21, 2009 16:55:29
What about just increasing the indexes?

dataset1 = [ [0, x], [3, x], [6, x], [9, x]]; // index *3
dataset2 = [ [1, x], [4, x], [7, x], [10, x]]; // (index *3) +1
dataset3 = [ [2, x], [5, x], [8, x], [11, x]]; // (index *3) +2


From on February 26, 2010 08:20:03
I just post a plugin in the plugin page (
which implements this feature.


From on May 31, 2010 06:10:04
Benjamin, does your plugin works against x as time mode? I tried but to no avail.


From on May 31, 2010 14:12:50
Sorry i don't test with the time mode.
Can you give me your code to test and debug with ?


From on June 11, 2010 13:56:54
Benjamin, I have noticed with your plugin that the bars seem to overlap slightly, is there a way to stop this?


From on June 18, 2010 14:22:04
Yeah i need to modify the plugin, but i don't find how to convert the border from pixel to x dimension.


From on August 18, 2010 19:56:21
@djm: I'm having trouble using your jquery.flotbar.js script. I understand that it is supposed to be a replacement for jquery.flot.js, right? When I use it it keeps saying that $.plot is not a function


From on November 21, 2011 13:41:12
please help!
I use a plug-in fleet has achieved all can not only true test set up x-axis! You can create one so that if he built a chart on the job only points with a uniform step and did not increase the distances between two points if their values ​​such as 3 8 10 15? I need it for a site to build a date with an equal step


I was able to create a dual bar chart by matching the size of the ticks to the size of the data elements. By having my data be the first of every month, I set the tick size to 1 month. I then made the second bar a negative width (of 20ish days).

Of course this works for two bars, there is an issue with the hover. I think it's not prepared for a negative width (bug?). Here's a screenshot of the results, close but only limited to 2 bars and no hover ability.
screen shot 2014-06-25 at 2 24 40 pm

Ideally we would be able to have one common axis identifiers. Like "Mar 2014" and all bars that would use that same label and stack next to eachother... when I find time, I'll see if I can fork this project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.