From a12f92cc8ff6c662b8bf7dcd62a180bac0cea6aa Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Mon, 24 Jun 2024 15:09:31 +0200
Subject: [PATCH] [charts] Support RTL for y-axis

---
 packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
index 44475ad90f1f..b26587275373 100644
--- a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
+++ b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
@@ -74,6 +74,8 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   } = defaultizedProps;
 
   const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
+
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
   const { left, top, width, height } = useDrawingArea();
@@ -101,13 +103,14 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
 
+  const revertAnchor = (!isRTL && position === 'right') || (isRTL && position !== 'right');
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: {
         fontSize: tickFontSize,
-        textAnchor: position === 'right' ? 'start' : 'end',
+        textAnchor: revertAnchor ? 'start' : 'end',
         dominantBaseline: 'central',
         ...tickLabelStyle,
       },