mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

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

Open alexgavrushenko opened this issue 1 year ago • 2 comments

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:

alexgavrushenko avatar Oct 23 '24 08:10 alexgavrushenko

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

alexfauquette avatar Oct 23 '24 09:10 alexfauquette

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

michelengelen avatar Oct 28 '24 10:10 michelengelen

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 avatar Nov 04 '24 13:11 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

alexfauquette avatar Jan 13 '25 13:01 alexfauquette

Same problem here. Any workaround? thanks

zsh1313 avatar Apr 06 '25 22:04 zsh1313

This was fixed in v8 by https://github.com/mui/mui-x/pull/17169.

bernardobelchior avatar Apr 07 '25 07:04 bernardobelchior

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.

github-actions[bot] avatar Apr 07 '25 07:04 github-actions[bot]