Statistics num and dates overlapping in RTL

[jermanuts]

Go to any app page and click on "Statistics"

Switch to RTL languages such as ar, fa etc

[razzeee]

Ideally this would be fixed by shadcn-ui/ui#1638

[jjeem]

Ideally this would be fixed by shadcn-ui/ui#1638

This will not solve it. It's an issue with Recharts and not Shadcn. To fix it, LTR layout should be forced on the component by explicitly setting it.

[razzeee]

LTR?

[jjeem]

RTL has no effect here but causing this bug. The dates are still displayed in Left-To-Right order.
So setting dir="ltr" should fix the overlapping.

If you want RTL look, LTR layout is still needed and can be done by

• setting reversed prop on XAxis components
• setting orientation="right" on YAxis components

And I think I read somewhere Recharts won't release the fix until v3

[jermanuts]

You can have an idea on how it should look like from this chart: https://trends.google.com/trends/explore?q=google&hl=ar

• Issue with text overlapping

• There's an issue with the order of how the date is displayed, when hovering over the chart, it should be: year/month/day.

• The text below the x axis should have number first then month (RTL reading)