[charts] Scatter tooltipt highlight

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://mui.com/x/react-charts/scatter/#basics
2. Hover a point

Current behavior

I have no idea which point the tooltip is about:

Expected behavior

There seem to be a couple of different ways to solve this problem:

• Zooming https://www.highcharts.com/demo/highcharts/scatter

Screen.Recording.2025-04-28.at.01.44.31.mov

• Moving the tooltip to be right above the point rather than following the cursor.

• Fill/Not filled https://epoch.ai/data/notable-ai-models

Screen.Recording.2025-04-28.at.01.45.31.mov

• Crosshair https://observablehq.com/plot/interactions/crosshair

Screen.Recording.2025-04-28.at.01.48.10.mov

Context

It's related to #9231 on the tooltip UX.

This demo is already better: https://mui.com/x/react-charts/scatter/#click-event. It has:

      highlightScope: {
        highlight: 'item',
      },

this is closer to the default behavior that I would expect. Changing the default value could be a quick-win.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -

[JCQuintas]

@mui/xcharts As @oliviertassinari mentioned, changing the default highlightScope would improve the behavior, but it would technically be a breaking change.

Should we go for it or wait for the next release window?

[oliviertassinari]

@JCQuintas We have shipped changes like this in the past as minor, with the arguments that it's a bug fix 😁🐞. In theory, any bug fix changes behavior and can be breaking. So that I think that it's an option to consider.