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

Since the problem is, according to Atais:

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.

I managed to pass the x's values as integer values (ex: 20160211) instead of formatted dates (ex: 2016-02-11 or similars) to nvd3, and then on tickFormatformat them to display properly.

I wrote another plunker with the problem and the commented solution (used momentjs):

---

Plunker with the simulated error: http://plnkr.co/edit/fXDQ0f?p=preview

Data is provided in format x: milliseconds, y: int, like {x: 1446418800000, y: 20}, and it is being formated with tickFormat:

  xAxis: {
    tickFormat: function(d) {
      return moment(d).format('YYYY-MM-DD');
    }
  }

---

Plunker with the solution: http://plnkr.co/edit/KpALzo?p=preview

Data is provided in format x: int, y: int, like {x: 20160211, y: 20}, and it is being formated with tickFormat:

  xAxis: {
    tickFormat: function(d) {
      moment(d, 'YYYYMMDD').format('YYYY-MM-DD');
    }
  }

---

Note that you can do it with time too, just by appending to the 'numeric date'.

As stated from @ajaybc, will not work well with dates from different months, since d3 will interpolate X axis with invalid filling dates (days 32, 33, 34 and so on)