X Axis
Date labels for the horizontal axis in line and area charts
Preview
Installation
pnpm dlx shadcn@latest add @bklit/x-axisUsage
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).
import { LineChart, Line, XAxis, ChartTooltip } from "@bklitui/ui/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.