Function useHoveredPoint

React hook that keeps track of the point being hovered in a chart. This hook is normally used with ChartOverlayXY. Given a list of timeseries, it returns the handlers onMouseMove, onMouseLeave and pointInfo.

Example

const { pointInfo, onMouseMove, onMouseLeave } = useHoveredPoint(timeseriesList);

return (
  <svg width={width} height={height}>
    {timeseriesList.map(timeseries => (
      <LineChart timeseries={timeseries} {...} />
    ))}
    {pointInfo?.point && (
      <Tooltip point={pointInfo?.point}>
        <CircleMarker />
      </Tooltip>
    )}
    {pointInfo && (
      <LineChart
        timeseries={timeseriesList[timeseriesIndex]}
        strokeWidth={4}
      />
    )}
    <ChartOverlayX
      onMouseMove={onMouseMove}
      onMouseLeave={onMouseLeave}
      {...otherProps}
    />
  </svg>
);

Returns

The hovered point information and the onMouseMove and onMouseLeave callbacks.