NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis

Question

I am currently working with NVD3 using Angular Directive (angular-nvd3). I have a very simple line chart with very simple data.

The problem I have encountere

Answer 1

This bugged me for a while and I could not find an answer here. I even have opened a bug on GitHub: https://github.com/novus/nvd3/issues/1382#issuecomment-160694559 and I was clued in on the answer.

---

The problem:

The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.

The version showing this misconception is here: http://plnkr.co/edit/2iMHOp?p=preview

---

Solution:

So now, when I know what I could do, I managed to substitute the ticks by using tickValues parameter in nvd3 / angular wrapper. The version with the solution is here: http://plnkr.co/edit/23n3ll?p=preview

---

Yet another bug :)

Funny thing is that since the labels are too long to be displayed, I had to rotate them so they could fit. Another bug occurs here (I think). As you can see 2nd and last but one tick label is missing. First I tried using the solution mentioned here: NVD3 Line Chart X Axis Ticks Are Missing using the showMaxMin parameter but it does not work correctly. But if you rotate the labels to ~ -70 degrees the labels are displayed OK.

I guess this is not the end with my NVD3 journey ;)