leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.48k stars 370 forks source link

Best practice to avoid clipped axis ticks' labels #944

Open zefirka opened 2 weeks ago

zefirka commented 2 weeks ago

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:

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 :)

leeoniya commented 1 week ago

take a look at https://leeoniya.github.io/uPlot/demos/axis-autosize.html

the internals of this are actually quite complex/ungreat, and i want to refine them soonish.

the problem here is chicken-egg, since plotting area size (and padding and axis size) is affected by rendered tick values but the ticks which are rendered depend on the plotting area size + scale range. solving both things in a single pass is not possible, so uPlot has to run both functions twice until it converges on some solution that satisfies both somehow.

zefirka commented 1 week ago

Thanks, I missed out that I can use callbacks for paddings, it made your solution a bit easier then mine.

But i'll guess I'll wait for refine