Accepted answer

A better suggestion here as d3 does not scale the x-axis represented by dates well if it is not declared a timescale.

      .tickFormat(function(d) {
          return d3.time.format('%d-%m-%y')(new Date(d))

  chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph


You can explicitly control how the ticks are generated. To have ticks 24 hours apart, the code would be something like

chart.xAxis.ticks(, 1);


It looks like NVD3 doesn't actually use the D3 axis component to generate the labels, hence all of this has no effect. You would have to modify the source of NVD3 to achieve what you want.


Ok, got it! What I do is I create a sorted list of timestamps which are to be used as data on the x-axis and round them to the nearest day. Then I force NVD3 to use this data as intervals instead of the auto-generated intervals by doing:


where x_data is the list. And voila ! ...

Plot with aligned intervals

Related Query

More Query from same tag