How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3

Question

How can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted:

as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have more number of ticks than the actual values. What I'm looking for is something similar to this:http://nvd3.org/examples/line.html However when i hover over these ticks they are misaligned as shown:

thats where the graph line should be and thats where the hovered tick shows the tooltip.but for some reason i dont get 7 ticks displayed instead gets 10 ticks displayed and all the hovered tooltips get misaligned.I also tried to force nvd3 to have specific # of ticks but didnt work.

                chart2.xAxis
                .ticks(7)
                .tickFormat(function(d) {
                    return d3.time.format.utc('%b %d')(new Date(d));
                });

here is the fiddle: http://jsfiddle.net/86hr7h1s/4/ I should ideally display 7 days and 7 ticks on the graph as oppose to duplicate days and 10 ticks on the graph. Any ideas whats wrong and how to correct this?

EDIT::::::

I was able to fix my issue for 7 days with the below answer, using the tickValues() instead of ticks(). However, for large values, say display a graph data of 2 months, i'll have 30 data points. I still see that my graph ticks on hover dont align:

As you can see above the hover points still dont align with the vertical ticks. I dont want to force the ticksValues for more than 7 days on the graph. Ay ideas how this could be achieved?

FYI: I used this to make nvd3 display 7 values:

    var datas = this.graphFunction(data);
    chart2.xAxis.tickValues(datas[0].xAxisTickValues);

http://jsfiddle.net/86hr7h1s/5/

Thanks!

Answer 1

If you want to control the ticks precisely, you should use .tickValues() rather than ticks().

API Doc