Best practice to avoid clipped axis ticks' labels
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 463
- PR merge metrics
- No merged PRs in 30d
Description
Hi @leeoniya
I faced with issue and I'd like to discuss it
The problem:
The last tick's label may be clipped (text appears outside of plotting area). This happens when splits' last element calculated too close to the series last element and provided options.padding is not enough to fit text. This issue appears quite rare, but anyway it's pretty annoying.
Simple example here: https://codesandbox.io/p/sandbox/test-uplot-nz5rcy?file=%2Findex.html
Workarounds:
-
Unconditionally increase corresponding padding. This will fix the problem but it will take a lot of usable space as well, and 99 out of 100 times it's just useless.
-
Try to get
splitsbyincrsand manually calculate required and available space and increase padding when it's necessary. This will fix the problem only when it appear and will save space when there's no need for padding increase. But I think it's kind of overcomplicated and also that's not very good to have a lot of charts with inconsistent paddings on same page (imagine a dashboard of charts with a bunch of different padding 🤢) -
Don't render labels on canvas, but write a plugin to render labels as HTML elements. Seems that it will work and provide much more control for rendering. But it looks like sledgehammer to crack a nut to me.
All given workarounds have significant disadvantages, so I thought maybe you have opinion on this case, like you know, Highcharts for instance trying to align every label in such way to fit into plotting area, or something like this. At current point the best thing I decided to do is to do nothing :)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox to reproduce the final tick label clipping and inspect the chart behavior described in the issue. No source file or test is named; done would require an agreed treatment for the clipped label and confirmation that the reproduced case is addressed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100