[charts] PieChart crashes on hover when changing data

[Rishi556]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/mui-mui-x-jep8g4?file=src%2Fdemo.tsx

Steps:

1. Use the left/right icon at the bottom to change chart.
2. Immediately after clicking, move your mouse to the chart area to trigger a hover
3. Chart Crashes

screen-capture.7.1.1.mp4

Current behavior

Piechart crashes.

Expected behavior

Chart should not crash, instead either show the tooltip for the section, or not show the tooltip and not crash.

Context

The pie chart displays data for different products, and only shows data for the product one at a time, depending on the selected product. This issue is reproducible on 4 browsers that have been tried(edge, chrome, firefox and safari).

Chrome dev tools complains about not being able to read color:

Uncaught TypeError: Cannot read properties of undefined (reading 'color')
    at DefaultChartsItemTooltipContent (chunk-BGQQ6PKH.js?v=630c7457:11503:44)
    at renderWithHooks (chunk-EL3PUDHE.js?v=630c7457:12171:26)
    at mountIndeterminateComponent (chunk-EL3PUDHE.js?v=630c7457:14921:21)
    at beginWork (chunk-EL3PUDHE.js?v=630c7457:15902:22)
    at HTMLUnknownElement.callCallback2 (chunk-EL3PUDHE.js?v=630c7457:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-EL3PUDHE.js?v=630c7457:3699:24)
    at invokeGuardedCallback (chunk-EL3PUDHE.js?v=630c7457:3733:39)
    at beginWork$1 (chunk-EL3PUDHE.js?v=630c7457:19761:15)
    at performUnitOfWork (chunk-EL3PUDHE.js?v=630c7457:19194:20)
    at workLoopSync (chunk-EL3PUDHE.js?v=630c7457:19133:13)

I initially thought it was due to something with the animation, but was told my coworker, that even with skipAnimation the issue persists(but I haven't been able to recreate that myself).

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.2 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.92)
  npmPackages:
    @emotion/react:  11.11.4
    @emotion/styled:  11.11.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.14
    @mui/icons-material: ^5.15.14 => 5.15.14
    @mui/lab: 5.0.0-alpha.169 => 5.0.0-alpha.169
    @mui/material: ^5.15.14 => 5.15.14
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/styled-engine-sc: ^6.0.0-alpha.18 => 6.0.0-alpha.18
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts: ^v7.0.0 => 7.0.0
    @mui/x-data-grid: ^v7.0.0 => 7.0.0
    @mui/x-date-pickers: ^v7.0.0 => 7.0.0
    @mui/x-tree-view: ^7.0.0 => 7.0.0
    @types/react:  18.2.67
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    styled-components:  6.1.8
    typescript: ^5.4.3 => 5.4.3

Search keywords: pie charts hover

[michelengelen]

One easy fix could be this:

diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
index a2587dc0b..4cb677472 100644
--- a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx
@@ -17,7 +17,7 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
 ) {
   const { series, itemData, sx, classes } = props;

-  if (itemData.dataIndex === undefined) {
+  if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
     return null;
   }
   const { displayedLabel, color } =

Would that be ok @alexfauquette ?

[alexfauquette]

Yes, that proposal make sens 👍

[Rishi556]

I got to the same solution on my playground just a little while ago. Patching this into the actual codebase and seeing how it goes, thanks for the help!

Update: Looks like does fix it. Do you guys want me to make a PR?

[alexfauquette]

Yes, PR are welcome

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @Rishi556?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.