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