feat(react-charts): allow a function for cartesian tickFormat - #36369
Open
Michael Flanakin (flanakin) wants to merge 10 commits into
Open
feat(react-charts): allow a function for cartesian tickFormat#36369Michael Flanakin (flanakin) wants to merge 10 commits into
Michael Flanakin (flanakin) wants to merge 10 commits into
Conversation
The cartesian `tickFormat` prop is a d3-format string, applied as
`d3Format(tickFormat)(value)`. A string cannot express two common value-axis
needs:
- A literal `%` — d3's `%` type multiplies by 100 (`format('%')(50)` → `5000%`),
double-scaling an already-0–100 axis (e.g. a 100%-stacked bar); there is no
literal/escape slot, so `~s%`, `%%`, `\%`, `'%'` all throw `invalid format`.
- App/i18n formatting — routing ticks through the app's own currency/number
formatter so axis ticks match tooltip/callout values; d3's `$` only emits its
locale symbol.
`HorizontalBarChartWithAxis`, whose value axis is the x-axis, is most affected.
Widen `tickFormat` to `string | ((value: number | Date) => string)` and branch in
`createNumericXAxis` and `createDateXAxis`. Backward compatible: a string keeps
the exact current d3 behavior; only a function is new.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR extends the @fluentui/react-charts cartesian tickFormat API to accept either a d3-format string or a (value: number | Date) => string callback, enabling custom/i18n formatting and literal % rendering for 0–100 numeric axes.
Changes:
- Widened
tickFormattypes in the cartesian chart public props and internal tick params. - Updated numeric/date x-axis tick formatting to support function-based formatting.
- Added unit tests and a new HorizontalBarChartWithAxis Storybook example demonstrating literal
%ticks.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/index.stories.tsx | Adds export for the new tickFormat-function story. |
| packages/charts/react-charts/stories/src/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisFunctionTickFormat.stories.tsx | New story demonstrating function tickFormat for literal % on a 0–100 axis. |
| packages/charts/react-charts/library/src/utilities/UtilityUnitTests.test.ts | Adds tests for function-based tickFormat on numeric and date axes. |
| packages/charts/react-charts/library/src/utilities/utilities.ts | Implements function handling for tickFormat in numeric/date axis creation. |
| packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.types.ts | Updates public prop types/docs for tickFormat and tickParams.tickFormat. |
| packages/charts/react-charts/library/etc/react-charts.api.md | Updates extracted API to reflect widened tickFormat types. |
| change/@fluentui-react-charts-function-tickformat.json | Adds a minor change file for the public API enhancement. |
…rmat - Convert NumberValue to primitive before passing to function tickFormat in createNumericXAxis so consumer formatters always receive a number - Move function tickFormat check above timeFormatLocale in createDateXAxis so callers can override locale formatting Co-Authored-By: Copilot <copilot@users.noreply.github.com> Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| @@ -0,0 +1,7 @@ | |||
| { | |||
| "type": "minor", | |||
Contributor
There was a problem hiding this comment.
change type to patch
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Positioning 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 515 | Changed |
vr-tests-react-components/ProgressBar converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 25 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 54 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Widens the cartesian
tickFormatprop fromstringtostring | ((value: number | Date) => string).Motivation: A d3-format string cannot express two common value-axis needs:
%— d3's%type multiplies by 100, double-scaling an already-0–100 axis (e.g. a 100%-stacked bar); there is no escape slot, so~s%,%%,\%all throwinvalid format.$only emits its locale symbol.HorizontalBarChartWithAxis(whose value axis is the x-axis) is most affected.Change: When a function is passed, it is called directly with the tick value instead of going through
d3Format. String behavior is unchanged — fully backward compatible.Files changed
CartesianChart.types.ts—tickFormattype widened onCartesianChartPropsandModifiedCartesianChartProps.tickParamsutilities.ts—ITickParams.tickFormattype updated;createNumericXAxisandcreateDateXAxisbranch ontypeof tickFormatUtilityUnitTests.test.ts— two new tests covering function tickFormat for numeric and date axesHorizontalBarChartWithAxisFunctionTickFormat.stories.tsx— new Storybook story demonstrating literal%on a 0–100 axisreact-charts.api.md— API surface updated to matchTest plan
yarn nx run react-charts:test— 152 passed, 10 skipped (timezone-gated), 0 failed0%…100%correctlytickFormatbehavior unchanged (covered by existing snapshot tests)yarn nx run react-charts:lintyarn nx run react-charts:type-checkChecklist
change/@fluentui-react-charts-function-tickformat.json, type:minor)react-charts.api.md)🤖 Generated with Claude Code