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

[sohagmahin]

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

[ckifer]

Sure, but as it stands your data in iso format will not get parsed correctly. In order for recharts to interpret time correctly it needs to be in milliseconds. This way it can plot time along a numerical axis and you can use the formatter function to display as you wish.

hopefully we can support parsing iso timestamps in the future

[sohagmahin]

@ckifer Updated times to milliseconds now. But I can not figure out how to display major hour ticks like that 11:00, 12:00, though there is no data with that time.

https://codesandbox.io/p/sandbox/recharts-issue-template-forked-dpq4rd

[ckifer]

Yeah, this needs to be easier.

Essentially what you would 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.

1. Get time where you want to start / end
2. Get hours between
3. Convert to numbers
4. Add to ticks array

Not sure about adding a differentiation when the day changes, but there should be a way to figure that out

[ckifer]

Edited the sandbox with detecting when the day changes, ended up being very simple. Let me know if this solves your usecase!

[ckifer]

[ckifer]

Going to close this as answered, feel free to comment back if there are issues

[sohagmahin]

Thanks @ckifer. It works.

[sohagmahin]

@ckifer New Day ticks not rendering correctly. Like Here the new day is 16 May 00:06 but ticks rendered 16 May 03:00

[ckifer]

It's only going to run the formatter function on the ticks that are actually shown. So unless you angle the ticks to get more to show, always the first one that is showing in that day will have the extra label