[charts] Support RTL for y-axis (mui#13614)

thomasmoon · Sep 6, 2024 · 438b284 · 438b284
1 parent bf1782d
commit 438b284
Showing 1 changed file with 4 additions and 1 deletion.
diff --git 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,
       },