From afe276541f7f4d1f16e6da92bff118735c62c1ba Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Tue, 3 Feb 2026 16:40:30 +0300
Subject: [PATCH] Fix chart data labels RTL alignment issue

- Force LTR direction on chart canvas elements via CSS
- Add locale: 'en-US' to chart options for consistent number formatting
- Add textDirection: 'ltr' to datalabels and tooltip configs
- Fixes background/text misalignment in Arabic RTL mode
---
 src/App.css               | 9 +++++++++
 src/config/chartConfig.js | 6 +++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 0310c5a..04f79cb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1990,3 +1990,12 @@ html[dir="rtl"] .chart-export-btn.visible {
   width: 100%;
   height: 100%;
 }
+
+/* Force LTR for chart canvas - fixes RTL label alignment issues */
+.chart-canvas-wrapper,
+.chart-canvas-wrapper canvas,
+.chart-container canvas,
+.exportable-chart canvas {
+  direction: ltr !important;
+  text-align: left !important;
+}
diff --git a/src/config/chartConfig.js b/src/config/chartConfig.js
index 1473a4f..2a7baac 100644
--- a/src/config/chartConfig.js
+++ b/src/config/chartConfig.js
@@ -48,6 +48,7 @@ export const createDataLabelConfig = (showDataLabels) => ({
   padding: 4,
   backgroundColor: 'rgba(255, 255, 255, 0.85)',
   borderRadius: 3,
+  textDirection: 'ltr', // Force LTR for numbers - fixes RTL misalignment
   formatter: (value) => {
     if (value == null) return '';
     if (value >= 1000000) return (value / 1000000).toFixed(2) + 'M';
@@ -60,6 +61,7 @@ export const createDataLabelConfig = (showDataLabels) => ({
 export const createBaseOptions = (showDataLabels) => ({
   responsive: true,
   maintainAspectRatio: false,
+  locale: 'en-US', // Force LTR number formatting
   layout: {
     padding: {
       top: showDataLabels ? 25 : 5,
@@ -75,7 +77,9 @@ export const createBaseOptions = (showDataLabels) => ({
       padding: 12, 
       cornerRadius: 8, 
       titleFont: { size: 12 }, 
-      bodyFont: { size: 11 } 
+      bodyFont: { size: 11 },
+      rtl: false,
+      textDirection: 'ltr'
     },
     datalabels: createDataLabelConfig(showDataLabels)
   },