[charts] Smoothen resizing animation

[hyperhand9]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/mui-charts-bug-n9k7kk

Steps:

1. Go to the link.
2. I set the chart of width and height to 500 and 300 initially.
3. Click the resize button to get wider the chart, then some data is hidden.

Current behavior

When the chart gets wider, some data is hidden.

Expected behavior

All data should always be displayed normally, even when the chart is resized.

Context

No response

Your environment

System:
OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
Binaries:
Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
npm: 10.8.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
pnpm: Not Found
Browsers:
Chrome: 128.0.6613.113
npmPackages:
@emotion/react: ^11.13.0 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.0
@mui/icons-material: ^6.1.0 => 6.1.0
@mui/material: ^6.1.0 => 6.1.0
@mui/private-theming: 6.1.0
@mui/styled-engine: 6.1.0
@mui/system: 6.1.0
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-charts: ^7.11.1 => 7.17.0
@mui/x-charts-vendor: 7.16.0
@mui/x-data-grid: ^7.11.0 => 7.17.0
@mui/x-internals: 7.17.0
@types/react: ^18 => 18.3.5
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
styled-components: ^6.1.9 => 6.1.13
typescript: ^5 => 5.6.2

Search keywords: charts resize

[alexfauquette]

Thanks for reporting. This bug should be fixed in the next release (today) thanks to this PR #14553

The animation is not perfectly fluid, but the plot is not stuck in an intermediate state anymore
https://codesandbox.io/p/sandbox/mui-charts-bug-forked-jwq823?file=%2Fsrc%2FApp.tsx%3A21%2C32

I'm renaming the issue to track that the transition when resizing could be improved

[Janpot]

👍 Got here after I noticed glitches in Material UI dashboard template while resizing

The animation is not perfectly fluid, but the plot is not stuck in an intermediate state anymore

I noticed it's fixed in mui/material-ui#43850 for lines now, but areas still seem to be affected:

Screen.Recording.2024-09-23.at.17.05.09.mov

[alexfauquette]

@Janpot The fix should be ported to area by #14711

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @hyperhand9! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[hyperhand9]

My problem was solved. Thank you for your help. 2024년 9월 27일 (금) 오전 6:58, github-actions[bot] ***@***.***>님이 작성:

…

*This issue has been closed.* If you have a similar problem but not exactly the same, please open a new issue <https://github.com/mui/mui-x/issues/new/choose>. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment. Note We value your feedback @hyperhand9 <https://github.com/hyperhand9>! How was your experience with our support team? We'd love to hear your thoughts in this brief Support Satisfaction survey <https://tally.so/r/w4r5Mk?issue=14664&productId=x>. Your insights help us improve! — Reply to this email directly, view it on GitHub <#14664 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABY6KRW5Z27KOED44AVE3MTZYR7PDAVCNFSM6AAAAABOO7XVESVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZYGAYDSOJQG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>