Stacked barChart- X axis label gets hidden if length of label text is higher

[blueeDeveloper]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Check the codesandbox link. I have named first label in Xaxis as 'Page A23' Due to the length of this label, the label is not displayed on screen. If i reduce the name of label to 'Page A', it displays fine.
2. The same issue happens if we add angle={-50} to the Xaxis.

What is expected?

Expected to show all the labels irrespective of their length

What is actually happening?

clipping off or hiding the label whose length is higher.

Environment	Info
Recharts	v2.1.6
React	17.0.1
System	MacBookPro14,3
Browser	Chrome - Version 95.0.4638.69

[blueeDeveloper]

Can someone pls update on this

[nikolasrieble]

Not showing labels when they overlap is a feature.

We could:

• truncate the tick instead have it disappear (as per suggestion of @Yilun-Sun)
• adapt getStringSize to consider rotation angle https://github.com/recharts/recharts/blob/0f1bd03a3f97b281d95846e88908e843e60c3d3e/src/util/DOMUtils.ts#L75

[leomunizq]

nothing yet ?

[nikolasrieble]

If you want all labels to show up, you can just set the interval to 0.

https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/api-cartesian-cartesianaxis--api&args=interval:0

You can find an nice example of how the axis behaves here https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-cartesian-cartesian-axis-tick-positioning--tick-positioning

[ckifer]

To add to this, there has been some changes that do take angle into account now.

https://codesandbox.io/s/mixed-bar-chart-forked-msfmvc?file=/src/App.tsx

[karanVR]

just add interval = {0} in XAxis:

<XAxis className="mt-8" dataKey={"name"} interval={0}