Chart Axis Tick

A recharts axis tick that singles out one value — today, the active day, the current week — and keeps the rest muted. Pass it as an element and recharts injects the position and value.

tsx

1import { ChartAxisTick } from "@pestoui/core"

Weight

Bare text: the active label in foreground ink and semibold. format maps the raw tick value — here an index — to the label.

Wash

The active label sits on a 14% wash of --selected. Its ink stays foreground — a coloured label on its own tint misses AA.

Pill

The active label reversed out of a solid pill. isActive decides from the raw value when activity is not a plain match — here, every sample in the current week.

Props

Prop	Type	Default	Description
emphasis	"weight" \| "wash" \| "pill"	"weight"	How the active tick stands out: semibold ink, a --selected wash behind it, or a solid reversed pill.
activeValue	number \| string	—	The tick is active when String(payload.value) === String(activeValue).
isActive	(value: number \| string) => boolean	—	Decides activity from the raw tick value. Wins over activeValue.
format	(value: number \| string) => ReactNode	String(value)	The label for a raw tick value.
x, y, payload	number \| string, { value }	—	Injected by recharts when the tick is passed as an element. Leave them out.

PreviousChart Next Chart Reference Label

Pesto UI · 117 documented components