Is your feature request related to a problem? Please describe.

Currently, if we rotate the X-Axis tick labels, we need to manually fit the X-Axis label and tick labels via margin.bottom and Label.offset.

The ability to have auto-width was recently added to the Y-Axis as per this PR. However, such a feature does not exist yet for the X-Axis. I might be wrong, but it should be possible to use a similar implementation for X-Axis.

Describe the solution you'd like

I would like to be able to set a single string "auto" to XAxis.height.

Describe alternatives you've considered

Currently, I am using a hook that looks a little like the following to get things to auto-calculate the tick label height but this doesn't provide a good developer experience since this requires a ref and setting the height in a few places.

// Get the x-axis tick labels
const ticks = element.querySelectorAll<SVGTextElement>(
  '.recharts-xAxis-tick-labels .recharts-cartesian-axis-tick-value'
);

// Get the maximum height of the tick labels rounded up to the nearest integer
return Math.ceil(
  Array.from(ticks).reduce(
    (max, tick) => Math.max(max, tick.getBoundingClientRect().height),
    0
  )
);

Additional context

Here is a picture of what is desired: