ReCharts x-axis times ticks are not display major hour like 11:00 12:00

I want to display x-axis ticks hourly value like that 11:00 or 12:00 if there any new day come then display 14 May 2024 11:00

Is that possible with recharts?

Here is my code snippet. https://codesandbox.io/p/sandbox/recharts-issue-template-forked-dpq4rd

I expect to display ticks like that.

11:00, 12:00, 14 May 2024 15:00, 20:00

Answered this question in the duplicate GitHub issue. But re-iterating here:

Recharts does not currently support an explicit time axis.

Essentially what you have to do is precalculate what those ticks would be in numeric value and then add them to the XAxis ticks array. The axis also needs to be "number" type in order to be able to interpolate between values.

1. Get time where you want to start / end
2. Offset the start by 1 hour and add numeric value to array until you get past the end date
3. Specify the result as the ticks array on XAxis
4. Use tickFormatter on XAxis to format as needed

Sandbox here

Result: