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 00000000000000..77d38f1f558ec0 --- /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 10d73bedd78fa4..23cc239b15cadc 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);