# X Axis

> Date labels for the horizontal axis in line and area charts

Source: https://ui.cortexcn.dev/docs/utility/axis/x-axis

## Installation

```bash
npx shadcn@latest add @cortexcn/x-axis
```

## Usage

The XAxis component displays date labels along the bottom of line and area charts. It must be used inside a chart component (`LineChart` or `AreaChart`).

```tsx
import { LineChart, Line, XAxis, ChartTooltip } from "@/components/charts";

<LineChart data={data}>
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</LineChart>;
```

## Props

| Prop              | Type                 | Default  | Description                                                                                        |
| ----------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------- |
| `numTicks`        | `number`             | `5`      | Number of ticks to show (including first and last)                                                 |
| `tickerHalfWidth` | `number`             | `50`     | Width of the date ticker box for fade calculation when tooltip is visible                          |
| `tickMode`        | `"data" \| "domain"` | `"data"` | `"data"` snaps labels to data rows (aligned with crosshair); `"domain"` uses even calendar spacing |

## Behavior

- **Data-aligned labels**: By default, XAxis picks evenly spaced data rows for tick labels so crosshair and tooltip line up with the axis. Use `tickMode="domain"` for calendar-even spacing when alignment is not needed.
- **Crosshair fade**: When the tooltip is visible, labels near the crosshair fade to reduce visual clutter and improve readability.
- **Client-side only**: Renders via portal after mount to avoid SSR issues.

## Theming

Labels use the `text-chart-label` class, which inherits from your theme's muted foreground color.