> ## 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.

# Axis hooks

Hooks for accessing axis configuration, domains, and ticks.

## useXAxis

Returns the configuration and scale information for an X-axis.

```tsx theme={null}
import { useXAxis } from 'recharts';

function CustomComponent() {
  const xAxis = useXAxis(0);
  
  if (!xAxis) return null;
  
  // Access axis properties
  return null;
}
```

<ParamField path="xAxisId" type="AxisId" default="0">
  The ID of the X-axis. Defaults to `0` if not provided.
</ParamField>

<ParamField path="returns" type="BaseAxisWithScale | undefined">
  The axis configuration with scale, or `undefined` if the axis doesn't exist or if used outside a chart context.
</ParamField>

## useYAxis

Returns the configuration and scale information for a Y-axis.

```tsx theme={null}
import { useYAxis } from 'recharts';

function CustomComponent() {
  const yAxis = useYAxis(0);
  
  if (!yAxis) return null;
  
  // Access axis properties
  return null;
}
```

<ParamField path="yAxisId" type="AxisId" default="0">
  The ID of the Y-axis. Defaults to `0` if not provided.
</ParamField>

<ParamField path="returns" type="BaseAxisWithScale | undefined">
  The axis configuration with scale, or `undefined` if the axis doesn't exist or if used outside a chart context.
</ParamField>

## useXAxisDomain

Returns the calculated domain of an X-axis.

The domain can be numerical `[min, max]` or categorical `['a', 'b', 'c']`. The type is defined by the `type` prop of the XAxis.

```tsx theme={null}
import { useXAxisDomain } from 'recharts';
import { NumberDomain, CategoricalDomain } from 'recharts';

function CustomComponent() {
  const domain = useXAxisDomain(0);
  
  if (!domain) return null;
  
  // Check if numerical domain
  if (typeof domain[0] === 'number' && typeof domain[1] === 'number') {
    const [min, max] = domain as NumberDomain;
    console.log('Range:', min, 'to', max);
  } else {
    const categories = domain as CategoricalDomain;
    console.log('Categories:', categories);
  }
  
  return null;
}
```

<ParamField path="xAxisId" type="AxisId" default="0">
  The ID of the X-axis. Defaults to `0` if not provided.
</ParamField>

<ParamField path="returns" type="NumberDomain | CategoricalDomain | undefined">
  The domain of the X-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
</ParamField>

**Since:** 3.2

### Brush interaction

If the chart has a Brush:

* Outside Brush context: returns the filtered domain (brushed indexes only)
* Inside Brush context: returns the full domain

## useYAxisDomain

Returns the calculated domain of a Y-axis.

The domain can be numerical `[min, max]` or categorical `['a', 'b', 'c']`. The type is defined by the `type` prop of the YAxis.

```tsx theme={null}
import { useYAxisDomain } from 'recharts';

function CustomComponent() {
  const domain = useYAxisDomain(0);
  
  if (!domain) return null;
  
  if (typeof domain[0] === 'number' && typeof domain[1] === 'number') {
    console.log('Y-axis range:', domain[0], 'to', domain[1]);
  }
  
  return null;
}
```

<ParamField path="yAxisId" type="AxisId" default="0">
  The ID of the Y-axis. Defaults to `0` if not provided.
</ParamField>

<ParamField path="returns" type="NumberDomain | CategoricalDomain | undefined">
  The domain of the Y-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
</ParamField>

**Since:** 3.2

## useXAxisTicks

Returns the ticks of an X-axis. The ticks are the same as the ones rendered by the XAxis component.

```tsx theme={null}
import { useXAxisTicks } from 'recharts';

function CustomComponent() {
  const ticks = useXAxisTicks(0);
  
  if (!ticks) return null;
  
  return (
    <g>
      {ticks.map((tick, i) => (
        <text key={i} x={tick.coordinate} y={20}>
          {tick.value}
        </text>
      ))}
    </g>
  );
}
```

<ParamField path="xAxisId" type="AxisId" default="0">
  The ID of the X-axis. Defaults to `0` if not provided.
</ParamField>

<ParamField path="returns" type="ReadonlyArray<TickItem> | undefined">
  Array of ticks, or `undefined` if the axis doesn't exist or hasn't been calculated yet.
</ParamField>

**Since:** 3.8

## useYAxisTicks

Returns the ticks of a Y-axis. The ticks are the same as the ones rendered by the YAxis component.

```tsx theme={null}
import { useYAxisTicks } from 'recharts';

function CustomComponent() {
  const ticks = useYAxisTicks(0);
  
  if (!ticks) return null;
  
  return (
    <g>
      {ticks.map((tick, i) => (
        <circle 
          key={i} 
          cx={10} 
          cy={tick.coordinate} 
          r={3} 
          fill="red"
        />
      ))}
    </g>
  );
}
```

<ParamField path="yAxisId" type="AxisId" default="0">
  The ID of the Y-axis. Defaults to `0` if not provided.
</ParamField>

<ParamField path="returns" type="ReadonlyArray<TickItem> | undefined">
  Array of ticks, or `undefined` if the axis doesn't exist or hasn't been calculated yet.
</ParamField>

**Since:** 3.8

## Types

### TickItem

```typescript theme={null}
interface TickItem {
  value: any;
  coordinate: number;
  index: number;
  offset?: number;
}
```

### NumberDomain

```typescript theme={null}
type NumberDomain = readonly [min: number, max: number];
```

### CategoricalDomain

```typescript theme={null}
type CategoricalDomain = ReadonlyArray<number | string | Date>;
```