search

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.92k stars 1.19k forks source link

[charts] When you hover over a chart point when tooltip trigger item, all points in the current column are highlighted #13687

Open CzarOfScripts opened 4 days ago

CzarOfScripts commented 4 days ago

Steps to reproduce

Link to live example: codesandox.io

Steps:

  1. We have to create a LineChart with two lines (series)
  2. Set LineChart tooltip={{ trigger: "item" }} (which should say that the tooltip will appear for a point, not for the whole column)
  3. Hover over any point and see all the points in the column change their color as well.

Current behavior

When we hover over a point in a chart that may have a series of multiple lines and we have trigger: "item" set for tooltip, all points in the column are highlighted.

Animation

Expected behavior

With trigger: "item", only the point pointed at should be highlighted.

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 ```
JCQuintas commented 2 days ago

Hi @CzarOfScripts thanks for the report, this was added to the backlog. :)