> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/api/hooks/tooltip-hooks)

### 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](/api/hooks/axis-hooks)

### 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](/api/hooks/scale-hooks)

## Chart layout hooks

Access chart dimensions and layout information.

```tsx theme={null}
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

```tsx theme={null}
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>
  );
}
```