[charts] How to display given time as local time in a LineChart about mui-x HOT 9 CLOSED

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! 🙇🏼

from mui-x.

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)

from mui-x.

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)?

from mui-x.

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

from mui-x.

+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! 🙇🏼

from mui-x.

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.

from mui-x.

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

Thanks!

from mui-x.

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

from mui-x.

No it's fine then! Thanks!

from mui-x.