[charts] How to display given time as local time in a LineChart

[jvskriubakken]

The problem in depth 🔍

Hi

I am using charts - line chart, and have set the x-axis to be the time axis (scaleType: "utc"). The time is displayed in UTC, but I want to display the in local time, what is the best way to achieve that? Same question goes for local formatting of the date time.

Your environment 🌎

Browser: Chrome v120

`npx @mui/envinfo`

    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view: 6.17.0 => 6.17.0 
    @types/react: 18.2.22 => 18.2.22 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components: 6.0.8 => 6.0.8 
    typescript: 5.1.6 => 5.1.6 

Search keywords: charts utc time local
Order ID: 78678

[michelengelen]

Hey @jvskriubakken ... could you provide us with a minimal example of it?
That will help us tremendously to understand your problem. You can use this codesandbox as a starting point.
Thanks! 🙇🏼

[jvskriubakken]

OK. I have tried to create an example based on your starting point:
https://codesandbox.io/p/sandbox/infallible-chihiro-9t492y

In my browser (Chrome v120), the dates are displayed in UTC time, and the date times are formatted in english locale (12 hour clock with AM/PM). I expect or want the date times formatted in my norwegian locale (24 hour clock, and dates as: day-of-month/month/year)

[michelengelen]

In that case your best bet is to use an external date library like dayjs, since date formatting is a pretty bad experience with the built in Date object.

Check out this little demo i built on top of your example. Is this about the result you are looking for?

For the tooltip header value: @alexfauquette can we change the format of those independently? Like with a custom component (as a last resort)?

[alexfauquette]

Being able to format differently for tootlip and axis is not yet feasible

+1 for using a date library. If you don't use it in the rest of your app, maybe digging into the native toLocaleTimeString could worth it

[michelengelen]

+1 on what @alexfauquette wrote.

@jvskriubakken the only way you can take to get what you are aiming for is to use the slots, more specifically slots.axisContent

I have updated my previous demo with a very minimalistic approach here.

Let me know if this is sufficient for you. Thanks! 🙇🏼

[jvskriubakken]

Hi,

thanks for all the input guys.

I managed to change x-axis tick labels by giving the the following valueFormatter in the x-axis config:

const valueFormatter = (dateTimeJs: Date): string => {
   const dateTime = DateTime.fromJSDate(dateTimeJs); // Luxon DateTime
   return dateTime.toLocaleString(DateTime.TIME_24_SIMPLE);
};

I notice that the ChartsTooltip (I am using ResponsiveChartContainer now) displays the given utc date time in local time by it self. But when I override the valueFormatter on x-axis, then ChartsTooltip seems to use that valueFormatter for x-value too.

[jvskriubakken]

I understand now, that to be able to display a full date time in the ChartsTooltip I need to override the slots.axisContent :-)

Thanks!

[michelengelen]

Is there anything else regarding this that we can help you with @jvskriubakken?
If not we can close this issue! Thanks! 🙇🏼

[jvskriubakken]

No it's fine then! Thanks!