[charts] onHighlightChange behavior with showMarks={false} in <LineChart> component

[RemyNtshaykolo]

Steps to reproduce

1. Create a using Material UI with a dataset and a series where onHighlightChange is configured.
2. Set the showMarks property to true for the series and observe the output of onHighlightChange when highlighting a point on the chart.
   • Output should include a valid dataIndex (e.g., { seriesId: 'setpoint', dataIndex: 198 }).
3. Now, set the showMarks property to false for the same series.
4. Highlight a point on the chart and observe the output of onHighlightChange.
   • Output will include dataIndex: undefined (e.g., { seriesId: 'setpoint', dataIndex: undefined }).

This behavior demonstrates that dataIndex is only populated when showMarks is enabled, which appears to link it to the visibility of markers.

Current behavior

I noticed an inconsistency in the behavior of the onHighlightChange event handler in the Material UI component.
When showMarks is set to false, the handler returns:

{ seriesId: 'setpoint', dataIndex: undefined }

However, when showMarks is set to true, it correctly returns:

{ seriesId: 'setpoint', dataIndex: 198 }

This means the dataIndex value is only available when showMarks is enabled, which seems to tie the highlighting functionality to the visual markers.

Is this limitation by design, or could this be improved to decouple the onHighlightChange behavior from the showMarks setting? If it is feasible, adding this feature would be greatly appreciated.

Thank you for your attention to this matter!

Expected behavior

The onHighlightChange event should provide the dataIndex of the highlighted element regardless of the showMarks setting.
For example, when showMarks is set to false, the output should still include the correct dataIndex:

{ seriesId: 'setpoint', dataIndex: 198 }

his would decouple the highlighting functionality from the visual rendering of markers, making it consistent and usable for large datasets where showMarks cannot be enabled due to performance constraints.

Context

I am working with large datasets, and enabling showMarks is not viable due to performance concerns. It would be great if onHighlightChange could consistently provide the dataIndex regardless of the showMarks state.

Your environment

System:
    OS: macOS 14.5
  Binaries:
    Node: 22.10.0 - /opt/homebrew/bin/node
    npm: 10.8.3 - ~/...
    pnpm: 8.15.7 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base: 5.0.0-beta.58 => 5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.1.6 
    @mui/icons-material: ^6.1.5 => 6.1.6 
    @mui/material: ^6.1.5 => 6.1.6 
    @mui/private-theming:  6.1.6 
    @mui/styled-engine:  6.1.6 
    @mui/system: ^6.1.5 => 6.1.6 
    @mui/types:  7.2.19 
    @mui/utils: ^6.1.5 => 6.1.6 
    @mui/x-charts: ^7.22.0 => 7.22.2 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid: ^7.22.0 => 7.22.2 
    @mui/x-date-pickers: ^7.22.2 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @types/react: ^18.3.12 => 18.3.12 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.6.3 => 5.6.3 

Search keywords: LineChart onHighlightChange

Search keywords:

[michelengelen]

@JCQuintas seems like a valid reason to decouple, but I'll let you decide here if we move this to the board! 👍🏼

[JCQuintas]

Definitely a bug once you see it in action 😓

https://codesandbox.io/p/sandbox/twilight-pine-cdvjp6?from-embed=

[RemyNtshaykolo]

In the meantime, the index can be access in the valueFormatter function (with showMark as false). Here's an example:

valueFormatter: (value, index) => {
  // You can access the index here
  console.log(`The index is: ${index}`);
}

This is a good workaround because you don't need to have your mouse specifically over the marker to access the index; you can place it anywhere on the vertical.