Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Charting: customDateTimeFormatter and timeFormatLocale does not display the correct date for x axis #31345

Closed
2 tasks done
Gabnight opened this issue May 13, 2024 · 2 comments
Assignees
Labels
Fluent UI react (v8) Issues about @fluentui/react (v8)

Comments

@Gabnight
Copy link

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (36) x64 Intel(R) Xeon(R) CPU E5-2697 v4 @ 2.30GHz
    Memory: 33.23 GB / 63.92 GB
  Browsers:
    Chrome: 124.0.6367.119
    Edge: Chromium (123.0.2420.97), ChromiumDev (126.0.2552.0)
    Internet Explorer: 11.0.19041.3636

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:
image

Expected Behavior
point and tick should be aligned at midnight.
ex:
image

Note:
This bug is also visible in the React-charting demo website:
https://developer.microsoft.com/en-us/fluentui#/controls/web/linechart
image

This regression seems to have been brought about by this change:
image
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

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@github-actions github-actions bot added Fluent UI react (v8) Issues about @fluentui/react (v8) Needs: Triage 🔍 labels May 13, 2024
@Gabnight
Copy link
Author

FYI, there is also an issue in the demo website for vertical bar chart:
image

Regarding the title of the graph date should be displayed and not time.
From:
https://developer.microsoft.com/en-us/fluentui#/controls/web/verticalbarchart

@AtishayMsft
Copy link
Contributor

Duplicate of #31269

@AtishayMsft AtishayMsft marked this as a duplicate of #31269 May 20, 2024
@AtishayMsft AtishayMsft closed this as not planned Won't fix, can't repro, duplicate, stale May 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react (v8) Issues about @fluentui/react (v8)
Projects
None yet
Development

No branches or pull requests

4 participants