[charts] hovering over charts causes 'maximum update depth exceeded' error

[prolink007]

Steps to reproduce

Referencing this example from the documentation.

Here is the provided stackblitz from the documentation.

I am using chrome 125.0.6422.142.

Steps:

1. Load the stackblitz.
2. Move your cursor across the chart slowly for several seconds, letting the data load into the popup. And keep moving the cursor around the chart to load other popups. Notice the 'depth exceeded' error coming up randomly while moving your cursor. Vary the speeds of movement, fast and slow.

Current behavior

Moving your cursor across the chart causes the 'depth exceeded' error to come up.

Expected behavior

No 'depth exceeded' error to come up while hovering.

Context

Trying to avoid the error.

Your environment

npx @mui/envinfo

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.14.0 - ~\AppData\Local\fnm_multishells\14264_1718114663323\node.EXE
    npm: 10.7.0 - ~\AppData\Local\fnm_multishells\14264_1718114663323\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Chromium (125.0.2535.92)
  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.19
    @mui/icons-material: ^5.15.18 => 5.15.19
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170
    @mui/material: ^5.15.18 => 5.15.19
    @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.6.2 => 7.6.2
    @mui/x-data-grid: ^7.6.2 => 7.6.2
    @mui/x-date-pickers: ^7.6.2 => 7.6.2
    @types/react:  18.3.3
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript:  4.9.5

Search keywords: depth exceeded

[michelengelen]

Hey @prolink007 I cannot reproduce the issue with the given steps.
Could you try to replicate this in a stackblitz demo that throws this error more consistently?
Or test this a bit more with better steps to reproduce?
Thanks!

[prolink007]

Hey @prolink007 I cannot reproduce the issue with the given steps. Could you try to replicate this in a stackblitz demo that throws this error more consistently? Or test this a bit more with better steps to reproduce? Thanks!

@michelengelen

I provided two links. One is to the documentation. Just follow that link. Click on the stackblitz for the using a dataset section. Let the stack load. Then open inspection. Make sure it is docked to the window. Then start hovering around the data inside the chart. It does not start immediately. You have to do it for a few seconds. Then it will start showing up more frequently.

Here is a screen shot of what i am seeing. I can provide a video, if needed.

[michelengelen]

Thanks @prolink007 I can reproduce it now.
@JCQuintas I guess this comes from constantly updating the position with translate. WDYT?

[prolink007]

Thanks @prolink007 I can reproduce it now. @JCQuintas I guess this comes from constantly updating the position with translate. WDYT?

@michelengelen I can get this to happen on almost all the chart types in my code. I just thought it would be easier to use the stackblitz that was in the documentation to demonstrate. Hope that helps. 🤷

[JCQuintas]

@michelengelen yeah it seems to be an issue in how we calculate the Popper position. Though it only seems to appear in development, probably because the prod bundle is more optimised.

[JCQuintas]

Managed to get a more specific error

hydration-error-info.js:50 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at PopperTooltip (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/Popper/Popper.js:72:7)
    at Portal (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/Portal/Portal.js:39:5)
    at Popper (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/Popper/Popper.js:203:7)
    at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at NoSsr (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@mui/base/NoSsr/NoSsr.js:38:5)
    at ChartsTooltip (webpack-internal:///../packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx:74:89)
    at svg
    at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at ChartsSurface (webpack-internal:///../packages/x-charts/src/ChartsSurface.tsx:33:7)
    at HighlightedProvider (webpack-internal:///../packages/x-charts/src/context/HighlightedProvider/HighlightedProvider.tsx:42:3)
    at InteractionProvider (webpack-internal:///../packages/x-charts/src/context/InteractionProvider.tsx:69:5)
    at CartesianContextProvider (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx:26:58)
    at CartesianContextProviderReal (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx:62:12)
    at CartesianContextProviderPro (webpack-internal:///../packages/x-charts/src/context/CartesianProvider/CartesianProviderPro.tsx:28:58)
    at SeriesContextProvider (webpack-internal:///../packages/x-charts/src/context/SeriesContextProvider.tsx:72:5)
    at ColorProvider (webpack-internal:///../packages/x-charts/src/context/ColorProvider.tsx:19:5)
    at DrawingProvider (webpack-internal:///../packages/x-charts/src/context/DrawingProvider.tsx:47:5)
    at ZoomProviderReal (webpack-internal:///../packages/x-charts/src/context/ZoomProvider/ZoomProvider.tsx:35:3)
    at ZoomProvider (webpack-internal:///../packages/x-charts/src/context/ZoomProvider/ZoomProvider.tsx:17:3)
    at ChartContainer (webpack-internal:///../packages/x-charts/src/ChartContainer/ChartContainer.tsx:45:5)
    at div
    at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at ResponsiveChartContainer (webpack-internal:///../packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx:49:14)
    at LineChart (webpack-internal:///../packages/x-charts/src/LineChart/LineChart.tsx:59:5)
    at div
    at eval (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js:60:66)
    at Box (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/createBox.js:37:72)
    at BarsDataset
    at RtlProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/RtlProvider/index.js:22:7)
    at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:43:5)
    at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styled_f47ztnatjene6jl3ylt6b3ja6i/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:56:5)
    at ThemeProvider (webpack-internal:///../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+styl_r36f54zqraypp6ktpuggujlhem/node_modules/@mui/material/styles/ThemeProvider.js:27:14)
    at Layout (webpack-internal:///./pages/playground/components/Layout.tsx:55:21)
    at Page
    at Ge (webpack-internal:///../node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/styled-components/dist/styled-components.browser.esm.js:30:16024)
    at StyledEngineProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/docs/src/modules/utils/StyledEngineProvider.js:40:5)
    at CodeVariantProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/docs/src/modules/utils/codeVariant.js:55:5)
    at CodeCopyProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/CodeCopy/CodeCopy.tsx:181:3)
    at TranslationsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:35:3)
    at UserLanguageProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:72:5)
    at DocsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.github.com+mui+material-ui+tar.gz+f0026ad5bf4e1957cebd65b882bf_7jk4t7vxklzslemzp6cyak4wiu/node_modules/@mui/monorepo/packages/mui-docs/src/DocsProvider/DocsProvider.tsx:19:3)
    at AppWrapper (webpack-internal:///./pages/_app.js:182:5)
    at MyApp (webpack-internal:///./pages/_app.js:403:5)
    at PathnameContextProviderAdapter (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/shared/lib/router/adapters.js:89:7)
    at ErrorBoundary (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/components/react-dev-overlay/pages/ErrorBoundary.js:43:5)
    at ReactDevOverlay (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/components/react-dev-overlay/pages/ReactDevOverlay.js:34:5)
    at Container (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:80:1)
    at AppContainer (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:191:5)
    at Root (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_react-dom@18._743tn77mfn3mep2oufb5dpzqoy/node_modules/next/dist/client/index.js:423:5)
console.error @ hydration-error-info.js:50
window.console.error @ setup-hydration-warning.js:16
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
checkForNestedUpdates @ react-dom.development.js:27295
scheduleUpdateOnFiber @ react-dom.development.js:25470
dispatchSetState @ react-dom.development.js:17527
handlePopperUpdate @ Popper.js:119
fn @ Popper.js:146
forceUpdate @ createPopper.js:143
eval @ Popper.js:106
commitHookEffectListMount @ react-dom.development.js:23145
commitPassiveMountOnFiber @ react-dom.development.js:24921
commitPassiveMountEffects_complete @ react-dom.development.js:24886
commitPassiveMountEffects_begin @ react-dom.development.js:24873
commitPassiveMountEffects @ react-dom.development.js:24861
flushPassiveEffectsImpl @ react-dom.development.js:27034
flushPassiveEffects @ react-dom.development.js:26979
eval @ react-dom.development.js:26764
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

[jwitthaus]

I'm having the same issue with maximum update depth exceeded? Is there already any solution?

[Firgrep]

Same here

[jMoulis]

I got the same pb.

[DonikaV]

Same here

[KevinCayenne]

same here

[mcewball13]

I also am having this issue. I have not tested in production yet. I will report back once I get into production.

[bs-spasici]

facing the same issue with Pie chart. could not find a workaround if i do the chart without any additional options/customization

[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

@prolink007 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.