Bar chart overlaps with months

[afandian]

I have a bar chart that shows figures per month. The bars aren't evenly spaced out on the x axis and overlap. Presumably because months don't have all have the same number of days.

[lucjan]

@afandian I'm having the same issue. Seems there's no response - did you find any solutions on your side?

[RashidClark]

As a hack, here's a fix I put in for our company's project. For us, we know that the bars in the graph will always represent a single day. So for your example, you'll want to replace "day" with "month" in the code below. This change is in rickshaw.js, in the definition for Rickshaw.Graph.Renderer.Bar , in its "render" function. In there, there is a line like so:

var seriesBarWidth = this.unstack ? barWidth / activeSeriesCount : barWidth;

The hack is placed after that line:

// Change the bar width to match the tick width of the x-axis:
var tickWidths    = graph.xaxis.tickOffsets("day");
// Now, it SHOULD be the case that the following line of code would do the trick:
// seriesBarWidth  = graph.x(tickWidths[1].value);
// However, because Rickshaw is buggy, instead we'll redefine the bar widths 
// based on the width of the graph itself:
seriesBarWidth  = graph.element.scrollWidth / tickWidths.length;