[charts] Is there a property/callback to capture and pass forward on hover the current data-point hovered?

[jpsant]

im trying to, when the user hovers the line chart graph component, pass the data from the hovered point to a custom header component outside the line chart component, is there a way to do that?

[michelengelen]

Hey @jpsant ... yes, this should be possible with the onHighlightChange prop if I am not mistaken. Check out this section from the docs: Controlled Highlight

EDIT:
example with simple Linechart

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';
import { HighlightItemData } from '@mui/x-charts';

export default function BasicLineChart() {
  const [highlighted, setHighlighted] = React.useState<HighlightItemData | null>(null);
  return (
    <>
      <LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
          },
        ]}
        onHighlightChange={(item) => setHighlighted(item)}
        height={300}
      />
      <p>Highlighted item: {highlighted === null ? '' : highlighted.seriesId}</p>
      <p>Highlighted dataIndex: {highlighted === null ? '' : highlighted.dataIndex}</p>
    </>
  );
}

[jpsant]

i've tried this approach but for some reason the value of highlighted.dataIndex is always returning null and only returns some value when im hovering exactly on the line, not in the area of the lineChart.

[bernardobelchior]

Hey, @jpsant! Do you have a reproduction of what you're trying to achieve?

highlighted.dataIndex is undefined when hovering over a line or an area because a line or an area represent a whole series, not a point in the data. When hover over a point, then the dataIndex will be set. Doesn't this fulfill your use case? If not, could you explain why so I can better understand it?

[jpsant]

hi @bernardobelchior and @michelengelen , thanks for the response! <3

what im trying to achieve is when the user hovers over the chart, the header component above the chart updates with the information of the hovered point.

when using the onHighlightChange i get the following video result, the information is displayed only when i hover specifically over the line componente, not the area of the chart, and the dataIndex is always returning null.

Gravacao.de.Tela.2025-04-25.as.13.40.18.mov

it would work for me if the onHighlightChange method returned the dataIndex of the chart point when i hovered the area of the chart.

here is my series object:

const series: SeriesType[] = [
    {
      type: 'line',
      id: 'main',
      data: chartData.mainData.map((item) => item.performance),
      showMark: false,
      color: theme.palette.accent[500],
      connectNulls: true,
      baseline: 'min',
      area: true,
    },
  ]

[bernardobelchior]

Thanks for that response, @jpsant. That seems a valid use case that we should support. I'll discuss how to do that with the team.

[jpsant]

np! i think a method similar to the onClick methods should work like a charm! ✨