[charts] labels on YAxis have wrong position when direction is RTL on barchart and line chart

[ma7899]

Steps to reproduce

Steps to reproduce
Link to live example:
in the bar chart demo page.
https://mui.com/x/react-charts/bar-demo

Steps:

Set the direction of the settings to Right to Left

Current behavior

The yAxis labels cover the the legend yAxis line and they have wrong position.
but the legends are behaving correctly.

Expected behavior

The labels should be in the same position as they are in LTR. (just at the left of the yAxis)

Context

I am trying to create a dashboard in a website which has a language that is RTL.

Your environment

npx @mui/envinfo

OS: Windows 11 10.0.22621
Binaries:
Node: v20.13.1
npm: 10.5.2
yarn: 1.22.22
Browsers:
Chrome
npmPackages:
@emotion/react": "^11.11.4,
@emotion/styled": "^11.11.5,
@mui/material": "^5.15.20,
@mui/styled-engine-sc": "^6.0.0-alpha.18,
@mui/x-charts": "^7.7.0,
@types/react: 18.2.48
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: 4.9.5

Search keywords: RTL, labels, x-charts, bar chart, line chart, chart,=

[ma7899]

This also happens in line chart

[michelengelen]

@ma7899 thanks for raising this issue.
I'll add it to the board!

[alexfauquette]

The reason is that <text /> components have a wrong textAnchor in RTL. I'm adding a PR to fix that

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ma7899: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[Amir-A-M]

For those who ended up here, and are not using MUI, you can fix this RTL/LTR alignment issue by adding the following CSS:

// RTL
.apexcharts-yaxis-label {
    text-anchor: start;
}

// LTR
html[dir=ltr] .apexcharts-yaxis-label {
    text-anchor: end;
}