Hide overlapping x-axis tick labels #32829
Merged
Conversation
This file contains 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
AtishayMsft
reviewed
Sep 13, 2024
| return convertToLocaleString(dataset[index], culture) as string; | ||
| }); | ||
| .tickValues(tickValues) | ||
| .tickFormat(tickFormat); |
There was a problem hiding this comment.
ToDo: add unit tests for this logic
There was a problem hiding this comment.
Yes, will add the unit tests once the logic is finalized. Still have to cover scenarios like rotation, wrapping and truncation of tick labels. Also noticed that the calculateLongestLabelWidth util does not give very accurate results.
AtishayMsft
reviewed
Sep 13, 2024
packages/react-components/react-charts-preview/library/src/utilities/utilities.ts
Show resolved
Hide resolved
|
Could you resolve the conflict of change in prop name in upstream branch |
…luentui into hide-tick-overlap
krkshitij
force-pushed
the
hide-tick-overlap
branch
from
020ddb9
to
e0193ea
Compare
|
There is another conflict being reported. Could you resolve it. |
…luentui into hide-tick-overlap
AtishayMsft
approved these changes
Oct 7, 2024
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.
Previous Behavior
The default number of x-axis ticks causes tick labels to overlap in smaller viewports.
New Behavior
When the hideTickOverlap prop is set to true, continuous axes (such as number and date) automatically adjust their tick count based on the container width, while categorical/string axes hide any tick labels that might overlap.