From 38b3b5320a84f6c3caca62d4dd55d1f3885c9399 Mon Sep 17 00:00:00 2001 From: Anush Date: Wed, 14 Jan 2026 17:40:51 +0530 Subject: [PATCH 1/5] fix chart width issue in donut chart --- .../src/components/DonutChart/DonutChart.tsx | 4 +-- .../__snapshots__/DonutChart.test.tsx.snap | 30 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx index 1e064b7c69e02b..05a7214465c46b 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx @@ -318,7 +318,7 @@ export const DonutChart: React.FunctionComponent = React.forwar 36, ) : 0; - const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical - titleHeight) / 2; + const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2; const chartData = _elevateToMinimums(points); const valueInsideDonut = props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : ''; @@ -337,7 +337,7 @@ export const DonutChart: React.FunctionComponent = React.forwar )}
- + {!hideLegend && data?.chartTitle && ( Date: Wed, 14 Jan 2026 17:42:46 +0530 Subject: [PATCH 2/5] Add change file --- ...-react-charts-271be6c9-8e93-4228-8864-be8d0dd48a2d.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-271be6c9-8e93-4228-8864-be8d0dd48a2d.json diff --git a/change/@fluentui-react-charts-271be6c9-8e93-4228-8864-be8d0dd48a2d.json b/change/@fluentui-react-charts-271be6c9-8e93-4228-8864-be8d0dd48a2d.json new file mode 100644 index 00000000000000..8f48136c36d4cf --- /dev/null +++ b/change/@fluentui-react-charts-271be6c9-8e93-4228-8864-be8d0dd48a2d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix chart width issue in donut chart", + "packageName": "@fluentui/react-charts", + "email": "anushgupta@microsoft.com", + "dependentChangeType": "patch" +} From 2e63546dca78ecfce78a4b1f0c7d17fbb02bbce1 Mon Sep 17 00:00:00 2001 From: Anush Date: Wed, 14 Jan 2026 19:31:20 +0530 Subject: [PATCH 3/5] fix bugs --- .../src/components/DonutChart/DonutChart.tsx | 9 ++++-- .../__snapshots__/DonutChart.test.tsx.snap | 30 +++++++++---------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx index 05a7214465c46b..c97c4e15fe2a8d 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx @@ -318,7 +318,7 @@ export const DonutChart: React.FunctionComponent = React.forwar 36, ) : 0; - const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2; + const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical - titleHeight) / 2; const chartData = _elevateToMinimums(points); const valueInsideDonut = props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : ''; @@ -337,7 +337,12 @@ export const DonutChart: React.FunctionComponent = React.forwar )}
- + {!hideLegend && data?.chartTitle && ( Date: Thu, 15 Jan 2026 10:14:48 +0530 Subject: [PATCH 4/5] fix bug --- .../src/components/DonutChart/DonutChart.tsx | 2 +- .../__snapshots__/DonutChart.test.tsx.snap | 90 +++++++++---------- 2 files changed, 46 insertions(+), 46 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx index c97c4e15fe2a8d..bbaa8b93f5cf3c 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx @@ -353,7 +353,7 @@ export const DonutChart: React.FunctionComponent = React.forwar tooltipClassName={classes.svgTooltip} /> )} - + Date: Thu, 15 Jan 2026 15:57:03 +0530 Subject: [PATCH 5/5] change chart and title position --- .../src/components/DonutChart/DonutChart.tsx | 40 +- .../__snapshots__/DonutChart.test.tsx.snap | 1366 ++++++++--------- 2 files changed, 680 insertions(+), 726 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx index bbaa8b93f5cf3c..ce38cd20aaa444 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx @@ -347,32 +347,31 @@ export const DonutChart: React.FunctionComponent = React.forwar )} - - - +
= React.forwar legendContainer.current = e; }} className={classes.legendContainer} + style={{ marginTop: data?.chartTitle ? `-${titleHeight}px` : undefined }} > {legendBars}
diff --git a/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 50f0113ad1f685..aa9e4240c65388 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = ` ... @@ -37,47 +37,43 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = ` hidden="" /> - - - - - - - - - - + + + + + + + + @@ -88,6 +84,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = ` />
... @@ -205,47 +202,43 @@ exports[`Donut chart interactions Should reflect theme change 1`] = ` hidden="" /> - - - - - - - - - - + + + + + + + + @@ -256,6 +249,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = ` />
... @@ -375,47 +369,43 @@ Object { hidden="" /> - - - - - - - - - - + + + + + + + + @@ -467,6 +457,7 @@ Object {
... @@ -597,47 +588,43 @@ Object { hidden="" /> - - - - - - - - - - + + + + + + + + @@ -689,6 +676,7 @@ Object {
... @@ -859,52 +847,48 @@ Object { hidden="" /> - - - - - - - - - - + + - - -
-
+ + + + + + + +
+
@@ -951,6 +935,7 @@ Object {
... @@ -1081,47 +1066,43 @@ Object { hidden="" /> - - - - - - - - - - + + + + + + + + @@ -1173,6 +1154,7 @@ Object {
... @@ -1337,47 +1319,43 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu hidden="" /> - - - - - - - - - - + + + + + + + + @@ -1388,6 +1366,7 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu />
... @@ -1499,77 +1478,73 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` hidden="" /> - - - - - - - - - - - - - + + + + + + + + + + + @@ -1580,6 +1555,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = ` />
... @@ -1691,77 +1667,73 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form hidden="" /> - - - - - - - - - - - - - + + + + + + + + + + + @@ -1772,6 +1744,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form />
... @@ -1883,47 +1856,43 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` hidden="" /> - - - - - - - - - - + + + + + + + + @@ -1934,6 +1903,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = ` />
... @@ -2045,47 +2015,43 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color hidden="" /> - - - - - - - - - - + + + + + + + + @@ -2096,6 +2062,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color />
... @@ -2207,47 +2174,43 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 hidden="" /> - - - - - - - - - - + + + + + + + + @@ -2258,6 +2221,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1 />
- - - - - - - - - - + + + + + + + + @@ -2421,7 +2381,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` ... @@ -2446,47 +2406,43 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` hidden="" /> - - - - - - - - - - + + + + + + + + @@ -2497,6 +2453,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = ` />
... @@ -2608,47 +2565,43 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` hidden="" /> - - - - - - - - - - + + + + + + + + @@ -2659,6 +2612,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = ` />