Angular-nvd3: same distance between data on x scale

Question

By default scale of x axis is calculated from values. This gives uneven distance between two adjasted points. Like for example if I have an array of values like [1,2,5], there will be different distance on x axis for point, and also x axis labels will contain some other values, like 1,2,3,4,5. In case on dates displayed on x axis there may be cases when two equal dates are printed, looks ugly.

Take a look at this plunker. If you maximize your browser window, you could see that x axis labels have duplicates (like 02/09/2015 is visible 2 times on my screen). Also the distance between point is different.

How can I:

1. Make so that no duplicate x axis labes are present?
2. Distance between points is equaly distributed based in graph's width (not scaled based on values)?

Answer 1

You can explicitly set tickValues() and specify what ticks you want to show.

Alternatively, ticks() is more flexible, but gives you less control.

(Search for "D3 duplicate dates". This one may be helpful for example).

The reason the dates are repeating is that they are in fact different (equally spaced) timestamps that occur on the same day, since the spacing is < 24 hours. If you want to label with distinct dates, you could select a specific time on each day for the tick to fall on.