Flot bar chart month alignment issue

Question

I'm trying to draw a monthly bar chart using Flot library. The alignment with the month center is completely wrong with the x axis. I've created a jsfiddle to show the problem.

Intuitively when giving

bars: {
    show: true,
    fillColor: '#4682b4',
    barWidth: 15 * 24 * 60 * 60 * 1000,
    align: 'center'
},

I suppose the bar should align with the tick on the center, but is not! The result I'm expecting is the following:

Thanks a lot!

Answer 1

Instead of showing just the month, include %d in the time format and you'll see what's happening. Flot makes room for centered bars by subtracting half the bar's width from the axis min. So the bar is centered, but the x-axis ticks aren't what you expect.

I'm investigating what we can do about this; in the meantime you can either set an explicit minimum (which will either cut off the first bar or add undesirable white space to the left of it), or provide an array of ticks explicitly.

You may also want to try 0.7 instead of master, since it likely doesn't exhibit this problem.

I'll update this answer when I've finished examining the code.

Answer 2

I have a similar issue. See the "nov" bar. It is displaced in the Oct.

A solution is to add 1 hour to the timestamp of 2013-10-01 + (3600 *1000) (3600 sec * 1000 millisec) Then the timeaxis start at correct place at the first of month..