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

Tooltips for points on the edge of the chart are not always shown with tooltip trigger item

Open CzarOfScripts opened this issue 1 year ago • 1 comments

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 avatar Jun 28 '24 20:06 CzarOfScripts

Component: LineChart

CzarOfScripts avatar Jun 30 '24 09:06 CzarOfScripts

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

alexfauquette avatar Jul 01 '24 08:07 alexfauquette

@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?

CzarOfScripts avatar Jul 01 '24 09:07 CzarOfScripts

Should I make a new Issue about this?

Yes please :)

alexfauquette avatar Jul 01 '24 09:07 alexfauquette

:warning: 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.

@CzarOfScripts: 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.

github-actions[bot] avatar Jul 19 '24 12:07 github-actions[bot]