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

@@ -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;
+}

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)
   },