mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.91k stars 1.19k forks source link

[charts] Tooltips for points on the edge of the chart are not always shown with tooltip trigger item #13659

Open CzarOfScripts opened 3 days ago

CzarOfScripts commented 3 days ago

Steps to reproduce

Link to live example: codesandbox.io

Steps:

  1. Use LineChart
  2. Set the series curve to "linear".
  3. Set some numeric values for data
  4. Let's try to move the cursor over the points that are on the borders of the chart (top, right, bottom, left).
  5. Note that the tooltip does not always appear

Current behavior

Points on the chart boundaries do not always have tooltips.

Animation

Expected behavior

No response

Context

No response

Your environment

I'm use Google Chrome (126.0.6478.127)

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 21.3.0 - C:\Program Files\nodejs\node.EXE npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.81) 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.19 => 5.15.19 @mui/material: ^5.15.19 => 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.1 => 7.6.1 @mui/x-date-pickers: ^7.7.0 => 7.7.0 @types/react: ^18.2.66 => 18.2.78 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.4.5 ```

Search keywords: I'm sorry, it's hard for me to articulate the problem

CzarOfScripts commented 2 days ago

Component: LineChart

alexfauquette commented 1 day ago

Thanks for the nice reproduction :+1:

When the mouse is outside of the drawing area, we dispatch a chartExit that clean the tooltip content. So when you enter this point from the outside, the tooltip gets cleaned just after entering.

A quick fix could be to avoid triggering exitChart if we are already outside

CzarOfScripts commented 1 day ago

@alexfauquette, I'm not sure if I should post in the current thread, for the error is not really related. But if you look at my gif, you can see that when tooltip: { trigger: "item" } we have two points in the column highlighted, not the one we hovered over.

Should I make a new Issue about this?

alexfauquette commented 1 day ago

Should I make a new Issue about this?

Yes please :)