[Bug]: Charting: customDateTimeFormatter and timeFormatLocale does not display the correct date for x axis #31345
Closed
2 tasks done
Labels
Fluent UI react (v8)
Issues about @fluentui/react (v8)
Library
React / v8 (@fluentui/react)
System Info
Are you reporting Accessibility issue?
None
Reproduction
https://codepen.io/Gabnight/pen/wvZLroo
Bug Description
When creating point in local time zone (GMT +1 in the example) for line chart or area chart.
Ex:
{
x: new Date(2020,2,4),
xAxisCalloutData: new Date(2020,2,4),
y: 284000,
},
The x axis tick is set at 1 am with GMT +1 which makes UI weird because the tick is not aligned with the point.
Moreover, the localization of the date is broken because we need a date at midnight to display the day instead of time on the customDateTimeFormatter callback method.
It seems the date passed to the chart is handled as UTC even if GMT +1 value is specified in it.
Screenshot:
Expected Behavior
point and tick should be aligned at midnight.
ex:
Note:
This bug is also visible in the React-charting demo website:
https://developer.microsoft.com/en-us/fluentui#/controls/web/linechart
This regression seems to have been brought about by this change:
in the PR:
#30315
Logs
No response
Requested priority
High
Products/sites affected
make.powerautomate.com, https://developer.microsoft.com/en-us/fluentui#/controls/web/linechart
Are you willing to submit a PR to fix?
no
Validations
The text was updated successfully, but these errors were encountered: