fix: Horizontal chart with axis yaxis same label and truncation fixed (…

…#30031) * fix:[HorChartWAxis][RTL] y axis same text and truncation fixed * yarn change
microsoft · Dec 18, 2023 · 197dfaa · 197dfaa
1 parent c0e7c90
commit 197dfaa
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/change/@fluentui-react-charting-8bd430b6-3359-4e93-86ee-92b22540b88c.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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);