[charts] fix y-axis tick label overflow

[bernardobelchior]

Part of #10928.

Depends on:

• [charts] fix x-axis tick label overflow #16709

Fixes tick label overflow for the y-axis. It follows the same approach as #16709, but the y-axis doesn't hide overlapping labels at the moment, which is why in the "after" image below you'll see that there's overlapping labels, namely when the labels are rotated -90 and 90 degrees.

The algorithm for hiding overlapping labels in the y-axis is out of scope for this PR.

Before:

After:

[mui-bot]

Deploy preview: https://deploy-preview-16846--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against e14bb2d

[codspeed-hq]

CodSpeed Performance Report

Merging #16846 will not alter performance

_{Comparing bernardobelchior:fix-y-axis-tick-overflow (e14bb2d) with master (5fd9c1e)}

Summary

✅ 7 untouched benchmarks

[bernardobelchior]

@alexfauquette @JCQuintas should we consider once again updating the default axis size? Now for the y-axis 😛

The default axis size of 30px isn't enough to render "1,000" without ellipsis:

To do so, we'd need a width of 42px:

Should we increase the axis size? Would it make sense to reduce the margin or should we keep it as is? 🤔

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[bernardobelchior]

@alexfauquette @JCQuintas should we consider once again updating the default axis size? Now for the y-axis 😛

The default axis size of 30px isn't enough to render "1,000" without ellipsis:

To do so, we'd need a width of 42px:

Should we increase the axis size? Would it make sense to reduce the margin or should we keep it as is? 🤔

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

[JCQuintas]

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

That's probably for the better if it makes it so the defaults are better for everyone, I'll take a look at the screenshots

[JCQuintas]

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

It seems 40 would fit an entire 4 character number, though I suppose it doesn't because there are some margins expected to exist?

[bernardobelchior]

Increased it to 50px and solved the overflows of most demos. Let me know if you think that's acceptable

It seems 40 would fit an entire 4 character number, though I suppose it doesn't because there are some margins expected to exist?

To fit "1,000" we would need 42px as indicated in this comment. Without the comma, 40px might fit, yeah. Do you prefer if we chose 40px? It seems adding a comma is the default format.

[JCQuintas]

My brain didn't compute the comma 😅

I believe the best approach would be the lowest size we can have that solves most of the cases we have. Ofc my brain would prefer a round number, but If 42 is the lowest, then we might want to use that instead.

[bernardobelchior]

My brain didn't compute the comma 😅

I believe the best approach would be the lowest size we can have that solves most of the cases we have. Ofc my brain would prefer a round number, but If 42 is the lowest, then we might want to use that instead.

Ok, but I'd increase a couple pixels to maybe 45px. Text rendering can be different across different OSes, so it's possible that the same font and same text have different sizes.