Hello.
I am trying to work out how to manage different font-sizes for axis tick labels. I noticed that for very large font sizes, I end up with a plot where the axis tick labels start overlapping each other.
<img width="1024" height="78" alt="Image" src="https://github.com/user-attachments/assets/5a5a11b2-ca5a-4fab-a353-fec37930698f" />
Yes I know that doesn't look good as it is 😅 but what I am trying to figure out here is to be able to handle a decent variety of font size for labels while also not ending up with overlapping labels.
I am aware about the demo example https://leeoniya.github.io/uPlot/demos/axis-autosize.html but if you notice in that demo: that too has overlapped labels for `x-axis`.
<img width="928" height="63" alt="Image" src="https://github.com/user-attachments/assets/c35b4660-72a8-4096-a730-3328dcd250fc" />
I think this needs to be a callback on the `space` if I am not wrong? So that when the font starts to overlap, I can increase the space between the axis tick labels....But I am not sure how to achieve this with the options available on `space` which also doesn't have the `values` attribute being passed in, in the same way as the `size` property has it. Any tips here? This is more of a question than an actual issue but I can't assign a label to it while creating this issue :)
yeah so the problem here is chicken-egg. you have to render the values to pass them to the `space` callback, but the space callback is used to determine the tick resolution, and therefore the values that need rendering. not sure how to square that circle :)
what you can do is filter out the values (and grid and ticks) when you have determined they will collide. you can do this in
https://github.com/leeoniya/uPlot/blob/0e5812c504430f5c804e0f993376d8999b26cc34/dist/uPlot.d.ts#L1006-L1007
ideally you can determine the space needed without needing the values and can simply scale it based on the default and the bigger/smaller size.
Hi @leeoniya thanks for the response. I actually ended up implementing something for space which kind of works but I noticed a problem when I started panning 😅 probably due to the chicken-egg problem you mention...
`you have to render the values to pass them to the space callback, but the space callback is used to determine the tick resolution, and therefore the values that need rendering`
I notice flickering of axis values whenever I am panning. I think I would just go with the approach you mention that is to determine the space by simply scaling. Which values should I be scaling here? Did you mean the font size itself or the `space`?