Component | Axis: Hiding overlapping tick labels #466
Conversation
- Adding `tickTextHideOverlapping` config option to Axis component and implementing collision detection algorithm to hide overlapping tick labels - Configurable `minMaxTicksOnlyWhenWidthIsLess` property (was hard coded before)
Fixes the problem with axis tick labels going off screen because the auto margins were not calculated properly. It was happening when a different scale (e.g. Scale.scaleTime()) is provided to the container (and it generates ticks differently from the default scale), because this new scale was not passed to the Axis component during pre-render
|
Awesome fix for auto margin! |
|
@lee00678 Thanks. Can you please wait a little with merging this one? I was experimenting with adding more iterations to the label hiding logic and it worked pretty well. So I want to commit this change |
Sounds good. I wonder for the example in the doc, we could do something like Essentially the first example in the dev example. I feel like it's more clear with more ticks, less number of digits. But maybe once you fix the label hiding logic, it won't be an issue anymore. |
|
@lee00678 Not sure I got your point, can you please elaborate a little more? Also, I've just pushed my changes Screen.Recording.2024-10-30.at.3.54.37.PM.mp4 |
Sorry for the confusion, I meant this: |
|
@lee00678 I see, sounds good, feel free to merge the PR if you don't have any comments or questions |
This PR implements a feature that automatically hides overlapping Axis labels. The overlapping detection has only a single iteration, so overlap is still possible, but I think it's a reasonable trade off. We can tweak that later if needed.
Screen.Recording.2024-10-18.at.2.48.27.PM.mp4
Another important thing here, is that I've fixed the problem with wrong auto margins on the first render leading to tick labels go off screen.
Before
After
Docs update