CODEWITHSUNDEEP
javascriptd3.jsbar-chart
Edward J. Stembler
Edward J. Stembler

Reputation: 2032

Need help lining up x axis ticks with bars in D3.js bar chart

I have a working linear bar chart using D3.js, which also has time-based x axis. The bars are bound to a count attribute, while the axis is bound to a date attribute. The ticks in the axis are not lining up with the bars. Any idea how to line them both up?

Here's the jsFiddle: http://jsfiddle.net/MmEjF/

Upvotes: 4

Views: 4180

Answers (1)

Derek Hill
Derek Hill

Reputation: 6454

This is happening because the chart has 14 bars, but 15 tick marks.

The first tick mark should be the month prior to the start of your data set.

You can fix this by pulling forward the start of xTimeDomain by one month: 

xTimeDomain[0] = new Date(new Date(xTimeDomain[0]).setMonth(xTimeDomain[0].getMonth()-1));

Upvotes: 2

Related Questions