Axis scaleTime Interval

https://github.com/d3/d3-scale#time_ticks

According to the d3 docs an interval may be supplied to the ticks. I have used <AxisBottom numTicks={timeYear} /> which seems to work as expected but fails props validation:

Warning: Failed prop type: Invalid prop `numTicks` of type `function` supplied to `Axis`, expected `number`.

Relevant https://github.com/hshoff/vx/blob/master/packages/vx-axis/src/axis/Axis.js#L82

[esetnik]

Hi @hshoff thanks for your help. I don’t fully understand how to use tickValues for the bottom axis in conjunction with scaleTime. The problem is that if the data is only a few points (where one point is each year) then the axis automatically switches to month ticks. I’d like to use https://github.com/d3/d3-time#_interval to constrain the axis ticks to be just the years. You can see what I mean in the example where i’ve constrained the data to one point per year for only two years. Do I need to iterate the data and manually come up with an array of tickValues to pass to <Axis />? Is it possible that tickValues could take a function which reduces the input data to a sensible array of tick values? Then you’d be able to do something like <Axis tickValues={timeYear} />.

[Ricardinh0]

I agree with @esetnik. Be nice to not use tickValues as an alternative when d3 scaleTime.ticks() can accept either a number or a TimeInterval.

https://github.com/d3/d3-scale#time_ticks

Noob question, but can the type be simply updated to a union of number | TimeInterval?