Repository navigation
feat: support different tick label overflow - #835
Merged
Merged
Conversation
Collaborator
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
hcopp
commented
Aug 8, 2026
| import { Line } from '../../line/Line'; | ||
| import { Scrubber } from '../../scrubber/Scrubber'; | ||
| import { XAxis, YAxis } from '..'; | ||
| import { type AxisTickLabelOverflow, XAxis, YAxis } from '..'; |
Contributor
Author
There was a problem hiding this comment.
Had to refactor this one to have buttons to go between examples since there were so many now
Contributor
cb-ekuersch
previously approved these changes
Aug 11, 2026
cb-ekuersch
approved these changes
Aug 11, 2026
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
3 participants
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.
What changed? Why?
This PR adds
tickLabelOverflowto axes so that we can achieve styles near to other charting solutions we have seen. Before we only would allow or block repositioning to fit labels within the chart, now we also allow fading of axis labelsUI changes
See the bottom left of the chart. This now enables labels to be evenly spaced
Mobile
These graphs test all three potential paths, I believe visual regression testing is important on these charts since there is no easy way to test this functionality via unit tests.
In the first two screenshots you will see three paths for rendering the axis now
Before, someone would have needed to create a custom TickLabelComponent to accomplish this. The one downside with this solution was that there wasn't even a way to enable repositioning per axis. Now it only requires a simple prop,
tickLabelOverflow.Web
Docs
Docs.mov
Testing
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false