Hooks overview

Recharts provides a set of React hooks that allow you to access chart data, scales, and state from within custom components.

All hooks must be used within a chart context (inside a LineChart, BarChart, etc.). Using them outside a chart will return undefined.

Hook categories

Tooltip hooks

Access tooltip state and active data points.

• useIsTooltipActive - Check if tooltip is currently visible
• useActiveTooltipLabel - Get the active label
• useActiveTooltipDataPoints - Get active data points
• useActiveTooltipCoordinate - Get tooltip coordinates

View tooltip hooks documentation

Axis hooks

Access axis properties, domains, and ticks.

• useXAxis / useYAxis - Get axis configuration
• useXAxisDomain / useYAxisDomain - Get axis domain
• useXAxisTicks / useYAxisTicks - Get axis ticks

View axis hooks documentation

Scale hooks

Convert between data values and pixel coordinates.

• useXAxisScale / useYAxisScale - Convert data to pixels
• useXAxisInverseScale / useYAxisInverseScale - Convert pixels to data
• useCartesianScale - Convert data points to pixel coordinates

View scale hooks documentation

Chart layout hooks

Access chart dimensions and layout information.

import { useOffset, usePlotArea } from 'recharts';

function CustomComponent() {
  const offset = useOffset();
  const plotArea = usePlotArea();
  
  return (
    <text x={plotArea.x} y={plotArea.y}>
      Chart offset: {offset.top}, {offset.left}
    </text>
  );
}

useOffset

Returns the offset of the chart in pixels. The offset defines the blank space between the chart and the plot area, occupied by axes, legends, and brushes.

Returns: ChartOffset | undefined

usePlotArea

Returns the plot area where chart data is rendered (bars, lines, scatter points, etc.).

Returns: PlotArea | undefined

Usage example

import { LineChart, Line, XAxis, YAxis } from 'recharts';
import { useXAxisScale, useYAxisScale } from 'recharts';

function CustomAnnotation() {
  const xScale = useXAxisScale();
  const yScale = useYAxisScale();
  
  if (!xScale || !yScale) return null;
  
  const x = xScale('Page C');
  const y = yScale(2500);
  
  if (x == null || y == null) return null;
  
  return (
    <g>
      <circle cx={x} cy={y} r={5} fill="red" />
      <text x={x + 10} y={y}>Important point</text>
    </g>
  );
}

function Chart() {
  const data = [
    { name: 'Page A', value: 2400 },
    { name: 'Page B', value: 1398 },
    { name: 'Page C', value: 2500 },
  ];
  
  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Line dataKey="value" />
      <CustomAnnotation />
    </LineChart>
  );
}