Axis hooks

Hooks for accessing axis configuration, domains, and ticks.

useXAxis

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

import { useXAxis } from 'recharts';

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

xAxisId · AxisId · default: "0"

The ID of the X-axis. Defaults to 0 if not provided.

returns · BaseAxisWithScale | undefined

The axis configuration with scale, or undefined if the axis doesn’t exist or if used outside a chart context.

useYAxis

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

import { useYAxis } from 'recharts';

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

yAxisId · AxisId · default: "0"

The ID of the Y-axis. Defaults to 0 if not provided.

returns · BaseAxisWithScale | undefined

The axis configuration with scale, or undefined if the axis doesn’t exist or if used outside a chart context.

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.

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;
}

xAxisId · AxisId · default: "0"

The ID of the X-axis. Defaults to 0 if not provided.

returns · NumberDomain | CategoricalDomain | undefined

The domain of the X-axis, or undefined if it cannot be calculated or if used outside a chart context.

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.

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;
}

yAxisId · AxisId · default: "0"

The ID of the Y-axis. Defaults to 0 if not provided.

returns · NumberDomain | CategoricalDomain | undefined

The domain of the Y-axis, or undefined if it cannot be calculated or if used outside a chart context.

Since: 3.2

useXAxisTicks

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

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>
  );
}

xAxisId · AxisId · default: "0"

The ID of the X-axis. Defaults to 0 if not provided.

returns · ReadonlyArray<TickItem> | undefined

Array of ticks, or undefined if the axis doesn’t exist or hasn’t been calculated yet.

Since: 3.8

useYAxisTicks

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

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>
  );
}

yAxisId · AxisId · default: "0"

The ID of the Y-axis. Defaults to 0 if not provided.

returns · ReadonlyArray<TickItem> | undefined

Array of ticks, or undefined if the axis doesn’t exist or hasn’t been calculated yet.

Since: 3.8

Types

TickItem

interface TickItem {
  value: any;
  coordinate: number;
  index: number;
  offset?: number;
}

NumberDomain

type NumberDomain = readonly [min: number, max: number];

CategoricalDomain

type CategoricalDomain = ReadonlyArray<number | string | Date>;