Auto rotate X-Axis Tick labels when the chart gets smaller

[PratikAwaik]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

The Labels disappear depending on the interval property set for X-Axis. But I want the labels to rotate automatically when the size of the chart decreases. I'm using recharts to draw graphs in tldraw canvas, where you can resize the charts.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar (template: https://codesandbox.io/p/sandbox/simple-line-chart-v25dl4).

What is the expected behavior?

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

"recharts": "^2.12.7"

[ckifer]

This isn't a feature that everyone would necessarily want, so it would need to be under a flag.

The desired angle would also be rather subjective as some like ticks angled 35 degrees, some 40, some 45, etc. Feel free to make suggestions on what props or options could look like.

This probably won't be done for some time

[PratikAwaik]

@ckifer right.
I'd suggest something similar to what highcharts does - https://api.highcharts.com/highcharts/xAxis.labels.autoRotation

They have 2 props:

1. autoRotation: Array. - the allowed degrees of rotation as the chart gets narrower (default could be -45)
2. autoRotationLimit: number - Don't apply autoRotation when the label width is more than this many pixels. The labels can wordWrap.

Would love to have this feature as soon as possible.

[ckifer]

Makes sense!

Feature prioritization won't be able to happen until 3.x is our unfortunately - otherwise, feel free to contribute!