[charts] fix x-axis tick label overflow

[bernardobelchior]

Part of #10928.

To do

• Test multi-line labels
• Test multiple anchors/baselines

[mui-bot]

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

Generated by 🚫 dangerJS against a1d7350

[bernardobelchior]

It seems the tick labels are hidden in visual tests:

The reason is simple, but also unfortunate. We're spreading the style of MUI's caption onto the tick label, which has a line-height of 1.66. By default, the X axis has a height of 25px and the tick size is by default 6px. This means that there's 19px for the tick label to take up. The default font size of the tick label is 12px, which multiplied by 1.66 is 19.92px, meaning that it's 0.92px above the limit, so the label is hidden.

Options:

1. Increase default axis height
2. Decrease default tick size
3. Decrease tick label line height

In my opinion, number 3 is best because a line height of 1.66 seems to big for this use case.

This is a line height of 1.25:

This is a default line height of 1.66:

Is a default line height of 1.25 acceptable?

[github-actions]

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