With NVD3.js (nv.models.lineWithFocusChart), how do you set specific ticks on X-axis, when x values are dates?

Question

I\'m using nv.models.lineWithFocusChart, where I\'m showing some hourly measurements. So the x domain is dates.

What I need is to show a tick per hour on X axis:

Answer 1

The other solutions did not work for me. Also, I did not want to modify the source code for nvd3, because then future updates to nvd3 will break my code. Instead what did work for setting tick counts in nvd3 was sending the times as integers and specifying the specific values that I wanted displayed.

In my case I needed to do this:

chart.xAxis.tickValues([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]);

It turns out that setting tickValues overrides the ticks automatic generation per: https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues