fix(axes): rtl issue with x-axis (#1349)

plouc · Dec 18, 2020 · 95f3b34 · 95f3b34
1 parent b5bbeda
commit 95f3b34
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/axes/src/compute.js b/packages/axes/src/compute.js
@@ -138,6 +138,7 @@ export const computeCartesianTicks = ({
     const line = { lineX: 0, lineY: 0 }
     const text = { textX: 0, textY: 0 }
 
+    const isRTL = document.dir === 'rtl'
     let translate
     let textAlign = textProps.align.center
     let textBaseline = textProps.baseline.center
@@ -160,13 +161,13 @@ export const computeCartesianTicks = ({
             (ticksPosition === 'after' && tickRotation < 0) ||
             (ticksPosition === 'before' && tickRotation > 0)
         ) {
-            textAlign = textProps.align.right
+            textAlign = textProps.align[isRTL ? 'left' : 'right']
             textBaseline = textProps.baseline.center
         } else if (
             (ticksPosition === 'after' && tickRotation > 0) ||
             (ticksPosition === 'before' && tickRotation < 0)
         ) {
-            textAlign = textProps.align.left
+            textAlign = textProps.align[isRTL ? 'right' : 'left']
             textBaseline = textProps.baseline.center
         }
     } else {