[charts] Tooltip: 'TypeError: series is undefined' with updating series

[alexgavrushenko]

While updating series and changing tooltip state, may encounter a javascript error

TypeError: series is undefined

ChartsItemTooltipContent@webpack-internal:///../node_modules/@mui/x-charts/esm/ChartsTooltip/ChartsItemTooltipContent.js:34:7

May appear while

1. Moving mouse fast enough
2. Update series in background

Issue seems to appear because of accessing context by seriesId, that could be removed in the moment of tooltip rendering call
Consider adding undefined check to props of a tooltip, implement a proper GC in SeriesContext or calculate tooltip series outside of its render

Search keywords:

[alexfauquette]

Effectively, that's not a use case we anticipated.

Here is a minimal reproduction from what I understood https://codesandbox.io/embed/8wcxsg?module=/src/Demo.tsx&fontsize=12

The root cause is that the tooltip content comes from the InteractionContext which stores an object identifying the current element you are interacting with (most of the time the seriesId and dataIndex)

This state is maintained up to date by entering/leaving pointer events. But because you remove the series, the state gets outdated.

Checking is the series still exist is a solution. But cleaning the internal state when a series gets removed could be more efficient. Still need to find where to place such logic

[michelengelen]

added this to the board to not lose track of it. 👍🏼

[alexfauquette]

We will try to solve this issue by checking when a component unmout, itremoves himseft from the interaction context, the same way it does when pointer-out is trigger

[alexfauquette]

Other options we could test. Which seems more robust to new element being added under the pointer

https://stackoverflow.com/questions/8813051/determine-which-element-the-mouse-pointer-is-on-top-of-in-javascript
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint