[charts] Composition with AreaPlot Rendering Error

[bawpcwpn]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/priceless-sammet-pv2tc5?file=%2Fsrc%2FDemo.tsx%3A9%2C47

Steps:

1. Create a chart with <ChartContainer /> or <ResponsiveChartContainer /> with a <LinePlot /> and <AreaPlot /> to match
2. Display them in a display: grid styled container
3. Have the charts have different heights, with the taller chart coming after the first

Current behavior

The area plot cuts off unexpectedly

Expected behavior

The AreaPlot renders correctly

Context

No response

Your environment

npx @mui/envinfo

 System:
    OS: macOS 14.4.1
  Binaries:
    Node: 21.7.2 - ~/.asdf/installs/nodejs/21.7.2/bin/node
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.15.6 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.16 
    @mui/material: ^5.15.16 => 5.15.16 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-charts: ^7.3.2 => 7.3.2 
    @types/react: ^18.3.1 => 18.3.1 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: Chart Composition AreaPlot grid

[michelengelen]

Thanks @bawpcwpn for raising this issue. I can confirm that this behavior is a bug.

[alexfauquette]

Here is the code sandbox with a fix

https://codesandbox.io/p/sandbox/kind-franklin-37h9vx?file=%2Fsrc%2FChart.tsx%3A95%2C11

As explained in the warning after the clipping section demo if the id you use is not unique, the browser has no way to know which clipping area it has to use.

The solution in your codesadnbox is to ad const chartId = useId() and use this value to create the clipping id

[github-actions[bot]]

:warning: 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.

@bawpcwpn: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.