LineChart UTC Date Time issue

[memadev]

I use LineChart, I noticed that when I provide the data as:

[
  {x: 1711438500001, y: 0},
  {x: 1711438500001, y: 0},
  {x: 1711438800001, y: 0},
  {x: 1711439100001, y: 3},
  {x: 1711439400001, y: 6}
]

There are two issues:

• It shows date and time as local time both on x axis and popover.
• It does not show the time correctly, I see times like 24:35 as shown in the image.

This is how I have used LineChart:

<LineChart
series={[{
    title: 'Passengers Count',
    type: 'line',
    data: reports
}]}
xDomain={[
    new Date(startDateTime),
    new Date(endDateTime)
]}
yDomain={[0, maxPassengersCount + maxPassengersCount / 10]}
i18nStrings={{
    xTickFormatter: e =>
        new Date(e).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            hour: 'numeric',
            minute: 'numeric',
            hour12: !1
        })
            .split(',')
            .join('\n')
}}
ariaLabel='Passengers Count'
height={700}
hideFilter
hideLegend
xScaleType='time'
xTitle='Date Time (UTC)'
yTitle='Passengers Count'
empty={<Box textAlign='center' color='inherit'><b>No data available</b></Box>}
noMatch={<Box textAlign='center' color='inherit'><b>No matching data</b></Box>}/>

and this is also:

startDateTime: "2024-03-26T00:00:00+00:00"
endDateTime: "2024-04-01T23:59:59+00:00"

I would appreciate any hint that helps me fix this.

[gethinwebster]

It looks like this issue is related to the browser implementation if toLocaleDateTimeString, you should be able to fix it by providing hourCycle: 'h23' instead of hour12: false: https://stackoverflow.com/a/60656733

[memadev]

Thanks for the help, I changed it and it is working now.
I also changed the timezone, now everything works as expected:

i18nStrings={{
    xTickFormatter: e =>
        new Date(e).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            hourCycle: 'h23',
            timeZone: 'UTC',
            timeZoneName: 'short'
        })
            .split(',')
            .join('\n')
}}