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:

enter image description here

Thanks a lot!

DNS DNS · Accepted Answer · 2013-02-12T22:05:12

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.

Flot bar chart month alignment issue

2 Answers