From 197dfaaae117908e389e095592cb6ea6d0d736f3 Mon Sep 17 00:00:00 2001
From: Harish Gautam <33349461+harsh9975@users.noreply.github.com>
Date: Mon, 18 Dec 2023 20:22:08 +0530
Subject: [PATCH] fix: Horizontal chart with axis yaxis same label and
 truncation fixed (#30031)

* fix:[HorChartWAxis][RTL] y axis same text and truncation fixed

* yarn change
---
 ...act-charting-8bd430b6-3359-4e93-86ee-92b22540b88c.json | 7 +++++++
 packages/react-charting/src/utilities/utilities.ts        | 8 +++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 change/@fluentui-react-charting-8bd430b6-3359-4e93-86ee-92b22540b88c.json

diff --git a/change/@fluentui-react-charting-8bd430b6-3359-4e93-86ee-92b22540b88c.json b/change/@fluentui-react-charting-8bd430b6-3359-4e93-86ee-92b22540b88c.json
new file mode 100644
index 0000000000000..77d38f1f558ec
--- /dev/null
+++ b/change/@fluentui-react-charting-8bd430b6-3359-4e93-86ee-92b22540b88c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix:[HorChartWAxis][RTL] y axis same text and truncation fixed",
+  "packageName": "@fluentui/react-charting",
+  "email": "gautam33776@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts
index 10d73bedd78fa..23cc239b15cad 100644
--- a/packages/react-charting/src/utilities/utilities.ts
+++ b/packages/react-charting/src/utilities/utilities.ts
@@ -717,7 +717,9 @@ export function createYAxisLabels(
   axisNode.selectAll('.tick text').each(function () {
     const text = d3Select(this);
     const totalWord = text.text();
-    const truncatedWord = `${text.text().slice(0, noOfCharsToTruncate)}...`;
+    const truncatedWord = isRtl
+      ? `...${text.text().slice(0, noOfCharsToTruncate)}`
+      : `${text.text().slice(0, noOfCharsToTruncate)}...`;
     const totalWordLength = text.text().length;
     const padding = truncateLabel ? 1.5 : 1; // ems
     const y = text.attr('y');
@@ -737,7 +739,7 @@ export function createYAxisLabels(
       text
         .append('tspan')
         .attr('id', 'showDots')
-        .attr('x', x)
+        .attr('x', isRtl ? 0 : x)
         .attr('y', y)
         .attr('dy', dy)
         .attr('dx', padding + dx + 'em')
@@ -747,7 +749,7 @@ export function createYAxisLabels(
         .attr('text-align', 'start')
         .append('tspan')
         .attr('id', 'LessLength')
-        .attr('x', isRtl ? xValue : x)
+        .attr('x', isRtl ? 0 : x)
         .attr('y', y)
         .attr('dx', padding + dx + 'em')
         .text(totalWord);