# Source: https://mui.com/x/react-charts/hooks/use-axes.md

---
title: Charts - useAxes
productId: x-charts
---

# useAxes

Access axis configuration and properties for cartesian and polar charts.

The `use*Axes` and `use*Axis` hooks provide access to axis configurations and computed properties for both cartesian (x/y) and polar (rotation/radius) charts.

## Cartesian charts

For cartesian charts, you can use `useXAxes`, `useYAxes`, `useXAxis`, and `useYAxis` hooks to access x-axis and y-axis configurations.

### useXAxes / useYAxes

Use these hooks to access all axes of a given direction:

```js
import { useXAxes, useYAxes } from '@mui/x-charts/hooks';

function CustomComponent() {
  // All x-axes
  const { xAxis, xAxisIds } = useXAxes();
  // All y-axes
  const { yAxis, yAxisIds } = useYAxes();
}
```

### useXAxis / useYAxis

Use these hooks to access a specific axis by ID. If no ID is provided, the default axis is returned:

```js
import { useXAxis, useYAxis } from '@mui/x-charts/hooks';

function CustomComponent() {
  // Default x-axis
  const xAxis = useXAxis();
  // Specific x-axis
  const xAxisCustom = useXAxis('customAxisId');

  // Default y-axis
  const yAxis = useYAxis();
  // Specific y-axis
  const yAxisLeft = useYAxis('leftAxis');
}
```

## Polar charts

For polar charts (such as radar charts), you can use `useRotationAxes`, `useRadiusAxes`, `useRotationAxis`, and `useRadiusAxis` hooks.

### useRotationAxes / useRadiusAxes

```js
import { useRotationAxes, useRadiusAxes } from '@mui/x-charts/hooks';

function CustomComponent() {
  const { rotationAxis, rotationAxisIds } = useRotationAxes();
  const { radiusAxis, radiusAxisIds } = useRadiusAxes();
}
```

### useRotationAxis / useRadiusAxis

```js
import { useRotationAxis, useRadiusAxis } from '@mui/x-charts/hooks';

function CustomComponent() {
  // Default rotation axis
  const rotationAxis = useRotationAxis();
  // Specific rotation axis
  const rotationAxisCustom = useRotationAxis('customAxisId');

  // Access by index
  const radiusAxis = useRadiusAxis(0);
  // Access by ID
  const radiusAxisById = useRadiusAxis('radiusAxisId');
}
```

## Usage example

The following example demonstrates the use of `useXAxes` and `useYAxes` to access all axes in a chart with dual y-axes.
The custom components use these hooks to draw visual indicators showing the axis ranges and display axis metadata:

```tsx
import * as React from 'react';
import { useYAxes, useXAxis, useLineSeries } from '@mui/x-charts/hooks';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { useTheme } from '@mui/material/styles';

const dataset = [
  { month: 'Jan', temperature: 5, rainfall: 45 },
  { month: 'Feb', temperature: 7, rainfall: 38 },
  { month: 'Mar', temperature: 12, rainfall: 42 },
  { month: 'Apr', temperature: 16, rainfall: 35 },
  { month: 'May', temperature: 21, rainfall: 28 },
  { month: 'Jun', temperature: 25, rainfall: 22 },
];

function AxisRangeIndicators() {
  const { yAxis, yAxisIds } = useYAxes();
  const xAxis = useXAxis<'band'>();
  const allSeries = useLineSeries();
  const theme = useTheme();

  const xDomain = xAxis.scale.domain();
  const xStart = xAxis.scale(xDomain[0]) ?? 0;
  const xEnd = xAxis.scale(xDomain[xDomain.length - 1]) ?? 0;

  return (
    <g>
      {allSeries.map((series) => {
        const axis = yAxis[series.yAxisId ?? yAxisIds[0]];

        const seriesMin = Math.min(
          ...(series.data.filter((v) => v != null) as number[]),
        );
        const seriesMax = Math.max(
          ...(series.data.filter((v) => v != null) as number[]),
        );

        const yMin = axis.scale(seriesMin) ?? 0;
        const yMax = axis.scale(seriesMax) ?? 0;

        const color = series.color;

        return (
          <g key={series.id}>
            {/* Min value horizontal line */}
            <line
              x1={xStart}
              x2={xEnd}
              y1={yMin}
              y2={yMin}
              stroke={color}
              strokeWidth={1.5}
              strokeDasharray="5 5"
              opacity={0.6}
            />
            {/* Max value horizontal line */}
            <line
              x1={xStart}
              x2={xEnd}
              y1={yMax}
              y2={yMax}
              stroke={color}
              strokeWidth={1.5}
              strokeDasharray="5 5"
              opacity={0.6}
            />
            {/* Min value label */}
            <text
              x={(xStart + xEnd) / 2}
              y={yMin - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="middle"
            >
              {axis.id}
            </text>
            <text
              x={xEnd + 6}
              y={yMin - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="start"
            >
              min
            </text>
            {/* Max value label */}
            <text
              x={(xStart + xEnd) / 2}
              y={yMax - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="middle"
            >
              {axis.id}
            </text>
            <text
              x={xEnd + 6}
              y={yMax - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="start"
            >
              max
            </text>
          </g>
        );
      })}
    </g>
  );
}

export default function UseAxes() {
  return (
    <div style={{ width: '100%' }}>
      <ChartDataProvider
        dataset={dataset}
        xAxis={[
          {
            id: 'months',
            scaleType: 'point',
            dataKey: 'month',
          },
        ]}
        yAxis={[
          {
            id: 'temperature',
            scaleType: 'linear',
            min: 0,
            max: 30,
            position: 'left',
            label: 'Temperature (°C)',
            width: 50,
            labelStyle: {
              translate: '5px',
            },
          },
          {
            id: 'rainfall',
            scaleType: 'linear',
            min: 0,
            max: 50,
            position: 'left',
            label: 'Rainfall (mm)',
            width: 50,
            labelStyle: {
              translate: '5px',
            },
          },
        ]}
        series={[
          {
            type: 'line',
            dataKey: 'temperature',
            label: 'Temperature (°C)',
            yAxisId: 'temperature',
            color: '#1976d2',
          },
          {
            type: 'line',
            dataKey: 'rainfall',
            label: 'Rainfall (mm)',
            yAxisId: 'rainfall',
            color: '#dc004e',
          },
        ]}
        height={300}
        margin={{ right: 40, left: 0 }}
      >
        <ChartsSurface>
          <LinePlot />
          <ChartsXAxis />
          <ChartsYAxis axisId="temperature" />
          <ChartsYAxis axisId="rainfall" />
          <AxisRangeIndicators />
        </ChartsSurface>
      </ChartDataProvider>
    </div>
  );
}

```

## Caveats

These hooks must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.