fix(charts): DonutChart expands infinitely in vertical direction inside ResponsiveContainer by Copilot · Pull Request #35848 · microsoft/fluentui

Copilot · 2026-03-09T10:39:23Z

Analyze root cause of ResponsiveContainer expanding indefinitely in vertical direction
Fix DonutChart.tsx in react-charts: Extract getChartTitleHeight module-level helper; use chartTitleHeight / 2 as correction factor in _fitParentContainer's legendContainerHeight calculation to stabilise height
Fix DonutChart.base.tsx in react-charting: Add private static _computeTitleHeight method; subtract titleHeight from _height in getDerivedStateFromProps when legend is visible and chart title is present
Fix member ordering lint error: move _computeTitleHeight (private static) after getDerivedStateFromProps (public static) to satisfy @typescript-eslint/member-ordering rule
Update DonutChart snapshots (SVG height decreases by 18 px = titleHeight/2 as expected)
nx run react-charting:lint passes with 0 errors
All tests pass in both react-charts (867 tests) and react-charting
Add beachball patch change files for @fluentui/react-charting and @fluentui/react-charts

Original prompt

This section details on the original issue you should resolve

<issue_title>[Bug]: ResponsiveContainer expands indefinetely in vertical direction</issue_title>
<issue_description>### Charting Control

DonutChart

Package version

9.3.13

React version

17.0.2

Environment
System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 15.59 GB / 23.32 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Browsers:
    Chrome: 143.0.7499.192
  npmPackages:
    react: ^17 => 17.0.2 
    react-dom: ^17 => 17.0.2
Current Behavior

Hard to explain, its seems that it expands the container indefinetely in vertical direction. See the video:

20260308-1145-30.3161899.mp4

Expected Behavior

It should not do that, it should just allow responsive resizing of the given Chart, in my case DonutChart

Reproduction

https://storybooks.fluentui.dev/react/?path=/docs/charts_charts-donutchart--docs#donut-chart-responsive

Steps to reproduce

Just go to the Fluent Storybook link I provided, the issue happens there as well. The Video was taken from there as well.

You just scroll down and will see that it expands indefinetely.

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

The provided reproduction is a minimal reproducible example of the bug.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes [Bug]: ResponsiveContainer expands indefinetely in vertical direction #35845

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Root cause: When DonutChart has a chartTitle, its SVG height is _height + titleHeight/2 and the legend gets marginTop: -titleHeight. These don't fully cancel. Each measurement cycle adds titleHeight/2 (react-charts) or titleHeight (react-charting) to _height, causing infinite vertical expansion when used with ResponsiveContainer. react-charts: Add getChartTitleHeight() helper; use chartTitleHeight/2 as correction factor in _fitParentContainer's legendContainerHeight calculation. react-charting: Add static _computeTitleHeight() method; subtract titleHeight from _height in getDerivedStateFromProps when legend is visible and a chart title is present. Update DonutChart snapshots (SVG height decreases by 18px = titleHeight/2 as expected from the stabilised calculation). Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>

Hotell · 2026-03-09T12:12:03Z

@copilot make sure nx target pass, nx run react-charting:lint is failing

…romProps to fix member-ordering lint error Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>

Copilot · 2026-03-09T12:21:59Z

@copilot make sure nx target pass, nx run react-charting:lint is failing

Fixed in c4c3b70f. The @typescript-eslint/member-ordering rule requires public static members before private static members — _computeTitleHeight (private static) was incorrectly placed before getDerivedStateFromProps (public static). Swapped their order to resolve the lint error. nx run react-charting:lint now passes with 0 errors.

github-actions · 2026-03-09T12:53:54Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-charting` DeclarativeChart	`676.93 kB` `191.249 kB`	`676.979 kB` `191.25 kB`	`49 B` `1 B`
`react-charting` DonutChart	`203.423 kB` `63.604 kB`	`203.473 kB` `63.605 kB`	`50 B` `1 B`
`react-charts` DeclarativeChart	`762.108 kB` `220.192 kB`	`762.171 kB` `220.223 kB`	`63 B` `31 B`
`react-charts` DonutChart	`322.715 kB` `96.946 kB`	`322.778 kB` `96.963 kB`	`63 B` `17 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-charting` AreaChart	`302.827 kB` `94.751 kB`
`react-charting` ChartHoverCard	`37.196 kB` `12.7 kB`
`react-charting` GanttChart	`282.793 kB` `88.76 kB`
`react-charting` GaugeChart	`197.055 kB` `61.221 kB`
`react-charting` GroupedVerticalBarChart	`294.467 kB` `91.739 kB`
`react-charting` HeatMapChart	`285.643 kB` `89.439 kB`
`react-charting` HorizontalBarChart	`127.266 kB` `39.944 kB`
`react-charting` HorizontalBarChartWithAxis	`293.933 kB` `91.166 kB`
`react-charting` Legends	`151.481 kB` `46.399 kB`
`react-charting` LineChart	`332.434 kB` `101.789 kB`
`react-charting` MultiStackedBarChart	`181.657 kB` `55.217 kB`
`react-charting` PieChart	`134.305 kB` `42.299 kB`
`react-charting` PolarChart	`235.149 kB` `74.293 kB`
`react-charting` SankeyChart	`158.002 kB` `49.166 kB`
`react-charting` ScatterChart	`289 kB` `91.071 kB`
`react-charting` Sparkline	`87.616 kB` `29.671 kB`
`react-charting` StackedBarChart	`175.338 kB` `52.813 kB`
`react-charting` TreeChart	`84.809 kB` `26.636 kB`
`react-charting` VerticalBarChart	`303.585 kB` `93.172 kB`
`react-charting` VerticalStackedBarChart	`300.497 kB` `92.735 kB`
`react-charts` AreaChart	`412.28 kB` `126.425 kB`
`react-charts` FunnelChart	`314.268 kB` `93.991 kB`
`react-charts` GanttChart	`395.399 kB` `119.927 kB`
`react-charts` GaugeChart	`322.146 kB` `96.373 kB`
`react-charts` GroupedVerticalBarChart	`403.269 kB` `122.494 kB`
`react-charts` HeatMapChart	`397.47 kB` `121.788 kB`
`react-charts` HorizontalBarChart	`302.442 kB` `89.116 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` Legends	`242.388 kB` `71.585 kB`
`react-charts` LineChart	`422.844 kB` `128.284 kB`
`react-charts` PolarChart	`351.333 kB` `107.364 kB`
`react-charts` SankeyChart	`220.381 kB` `67.866 kB`
`react-charts` ScatterChart	`402.671 kB` `122.473 kB`
`react-charts` Sparkline	`91.393 kB` `28.708 kB`
`react-charts` VerticalBarChart	`439.74 kB` `128.215 kB`
`react-charts` VerticalStackedBarChart	`409.183 kB` `123.955 kB`

_{🤖 This report was generated against d33ac4d486d36f4298889dc7ca11330c7268eb5e}

github-actions · 2026-03-09T13:00:35Z

Pull request demo site: URL

Hotell · 2026-03-09T13:02:07Z

@copilot generate change files yarn change with type patch

…charts Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>

Copilot · 2026-03-09T13:04:55Z

@copilot generate change files yarn change with type patch

Done in c711637. Added patch change files for both @fluentui/react-charting and @fluentui/react-charts.

Initial plan

307d169

Copilot AI assigned Copilot and Hotell Mar 9, 2026

Copilot started work on behalf of Hotell March 9, 2026 10:39 View session

Copilot AI changed the title ~~[WIP] Fix ResponsiveContainer expanding indefinitely in vertical direction~~ fix(charts): DonutChart expands infinitely in vertical direction inside ResponsiveContainer Mar 9, 2026

Copilot finished work on behalf of Hotell March 9, 2026 11:21

Copilot started work on behalf of Hotell March 9, 2026 12:12 View session

fix(react-charting): move _computeTitleHeight before getDerivedStateF…

c4c3b70

…romProps to fix member-ordering lint error Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>

Copilot finished work on behalf of Hotell March 9, 2026 12:22

Copilot started work on behalf of Hotell March 9, 2026 13:02 View session

chore: add beachball patch change files for react-charting and react-…

c711637

…charts Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>

Copilot finished work on behalf of Hotell March 9, 2026 13:05

Hotell marked this pull request as ready for review March 9, 2026 13:08

Hotell requested a review from a team as a code owner March 9, 2026 13:08

Hotell marked this pull request as draft March 9, 2026 13:08

Hotell marked this pull request as ready for review March 9, 2026 15:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(charts): DonutChart expands infinitely in vertical direction inside ResponsiveContainer#35848

fix(charts): DonutChart expands infinitely in vertical direction inside ResponsiveContainer#35848
Copilot wants to merge 4 commits intomasterfrom
copilot/fix-responsivecontainer-expansion

Copilot AI commented Mar 9, 2026 •

edited

Loading

Uh oh!

Hotell commented Mar 9, 2026

Uh oh!

Copilot AI commented Mar 9, 2026

Uh oh!

github-actions bot commented Mar 9, 2026

Uh oh!

github-actions bot commented Mar 9, 2026

Uh oh!

Hotell commented Mar 9, 2026

Uh oh!

Copilot AI commented Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package version

React version

Environment

Current Behavior

Expected Behavior

Reproduction

Steps to reproduce

Are you reporting an Accessibility issue?

Suggested severity

Products/sites affected

Are you willing to submit a PR to fix?

Validations

Comments on the Issue (you are @copilot in this section)

Uh oh!

Hotell commented Mar 9, 2026

Uh oh!

Copilot AI commented Mar 9, 2026

Uh oh!

github-actions bot commented Mar 9, 2026

📊 Bundle size report

Uh oh!

github-actions bot commented Mar 9, 2026

Uh oh!

Hotell commented Mar 9, 2026

Uh oh!

Copilot AI commented Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Mar 9, 2026 •

edited

Loading