[charts] Refine line charts highlight

[CzarOfScripts]

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.

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]

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

[alexfauquette]

For now the highlight system is not perfect for line chart. We need more option to distinguish

• data point
• axis index
• series areas
  Kind of related to the barchart highlight a single group