leeoniya / leeoniya/uPlot

Best practice to avoid clipped axis ticks' labels

Open
#944 2 comments 0 reactions 0 assignees View on GitHub

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 splits by incrs and 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.