Skip to main content
Hooks for accessing tooltip state and data.

​
useIsTooltipActive

Returns whether the tooltip is currently active (visible). 
import { useIsTooltipActive } from 'recharts';

function CustomComponent() {
  const isActive = useIsTooltipActive();
  
  return (
    <text x={10} y={10}>
      Tooltip is {isActive ? 'visible' : 'hidden'}
    </text>
  );
}
​
returns
boolean
true if the tooltip is active, false otherwise. Returns false if used outside a chart context.
Since: 3.7

​
useActiveTooltipLabel

Returns the active tooltip label. The label is one of the values from the chart data, used to display in tooltip content. 
import { useActiveTooltipLabel } from 'recharts';

function CustomComponent() {
  const label = useActiveTooltipLabel();
  
  if (!label) return null;
  
  return (
    <text x={10} y={10}>
      Active: {String(label)}
    </text>
  );
}
​
returns
ActiveLabel
The active label, or undefined if there is no active interaction or if used outside a chart context.
Since: 3.0

​
useActiveTooltipDataPoints

Returns the currently active data points being displayed in the tooltip. This returns an array because a chart can have multiple graphical items (e.g., multiple Lines), and a tooltip with shared={true} will display all items at the same time. 
import { useActiveTooltipDataPoints } from 'recharts';

type DataPoint = {
  name: string;
  value: number;
  category: string;
};

function CustomComponent() {
  const dataPoints = useActiveTooltipDataPoints<DataPoint>();
  
  if (!dataPoints || dataPoints.length === 0) return null;
  
  return (
    <g>
      {dataPoints.map((point, i) => (
        <text key={i} x={10} y={20 + i * 15}>
          {point.name}: {point.value}
        </text>
      ))}
    </g>
  );
}
​
T
generic
default:"unknown"
The type of your data points. Defaults to unknown.
​
returns
ReadonlyArray<T> | undefined
Array of data points currently visible in the tooltip, or undefined if there is no active interaction or if used outside a chart context.

​
useActiveTooltipCoordinate

Returns the Cartesian x + y coordinates of the active tooltip. 
import { useActiveTooltipCoordinate } from 'recharts';

function CustomCursor() {
  const coordinate = useActiveTooltipCoordinate();
  
  if (!coordinate) return null;
  
  return (
    <circle 
      cx={coordinate.x} 
      cy={coordinate.y} 
      r={10} 
      fill="none" 
      stroke="red"
      strokeWidth={2}
    />
  );
}
​
returns
Coordinate | undefined
Object with x and y pixel coordinates, or undefined if there is no active interaction or if used outside a chart context.
Since: 3.7

​
Coordinate type

interface Coordinate {
  x: number;
  y: number;
}

​
Usage notes

  • All tooltip hooks return undefined when used outside a chart context
  • Recharts only allows one Tooltip per chart, so these hooks do not take any parameters
  • These hooks follow the <Tooltip /> props if the Tooltip element is present in the chart

Build docs developers (and LLMs) love

Get started for freeTalk to us