[Bug]: Date axis labels formatted to show only the year are being localized as if they were numbers

[krkshitij]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 18.41 GB / 31.71 GB
Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/krkshitij/pen/yLZdGKp

Bug Description

Actual Behavior

Expected Behavior

The date x-axis in the above example should display the year as 1980 instead of 1,980

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Shubhabrata08]

@krkshitij This is primarily because a Date Axis isn't configured for HeatMapChart and a String axis is fed by default to the xAxisType prop of CartesianChart

[krkshitij]

@Shubhabrata08 Yes, you are right. You can find some discussions about this issue here.

But the fix seems to be a bit more involved. Currently, a string axis is created regardless of the data type, which uses the d3 scaleBand utility. This utility has a bandwidth property that is used to determine the width and height of rectangles. The d3 scaleLinear and scaleTime utilities, used for number and date axes respectively, don't have such a property. We may need to figure out another way to resolve this issue.

[Shubhabrata08]

@krkshitij Is there a POC or draft under review currently regarding this issue?

[krkshitij]

@Shubhabrata08 No, I haven't seen any.

[harsh9975]

@AtishayMsft I found an approach to solve this issue. The label issue occurs only when we format data xAxisDateFormatString="%Y" So its formatted as string in HeatMap component and then it is converted as Number in Cartesian (since cartesian component is used by other components too its not a good approach to update the cartesian component)

What we can do is whenever xAxisDateFormatString="%Y" we can add a prefix "Y " this will stop cartesian component to localise the year. below is the example

Adding prefix can remove localisation of date as number and there is no need to update cartesian component

And further if we don't want the prefix to be printed we can just remove the "Y " from cartesian component and we will get the result

This might not be the right approach. But this will not affect cartesian component.