Can we have developer defined X and Y tick intervals in XYCharts ?

[VigneshTrantor]

Can we have developer defined X and Y intervals in XYCharts ? Presently, we can limit the number of ticks using the numTicks prop on Axis like this:
<Axis numTicks={4} />

Can we do something like this:

In the above image, if we select X Interval as 3, then I want to show ticks after intervals of 3 like 1, 5, 9 etc. Similarly, if it is a date column and we select 2 days, then ticks should be at an interval of 2 days. Is it possible to do something like this ?

[williaster]

Hey @VigneshTrantor 👋 , as documented in the @visx/axis docs you can use tickValues if you need more control over ticks than numTicks provides. The tradeoff is that you have to do all of the work for computing them.

[VigneshTrantor]

Thank you @williaster . I got it to work like this :

const tickValuesCalculator = (numArr: number[], interval: number) => {
    const highestVal = Math.max(...numArr)

    return lodash.range(0, highestVal + 1, interval);
};
...
...
<Axis
    tickValues={tickValuesCalculator([0, 1, 2, 3, 4], 2)}
/>