Axes & grid

XAxis

Horizontal axis at the bottom of the plot area. Renders the axis line, tick marks, tick labels, and an optional axis title. Tick values come from xScale.ticks() for linear/time scales, or xScale.domain() for band scales.

<XAxis
  stroke="#64748b"
  textFill="#cbd5e1"
  label="Month"
  labelOffset={30}
  tickCount={6}
/>

The textFill prop is separate from stroke, so you can tune tick text color independently of the axis line, useful for dark themes where you often want an invisible axis line and softly colored text.

YAxis

Vertical axis on the left. Same props as XAxis; the axis title is rotated -90° so it reads bottom-to-top, the standard convention.

<YAxis stroke="#64748b" textFill="#cbd5e1" label="Revenue" />

Tick formatters

Both axes accept a tickFormatter function that transforms each tick value into its display text. The formatter is typed to the scale’s output: you get numbers for linear scales, dates for time scales, strings for band scales.

<YAxis tickFormatter={(v) => `$${v.toLocaleString()}`} />

<XAxis tickFormatter={(d: Date) =>
  new Intl.DateTimeFormat("en", { month: "short" }).format(d)
} />

<XAxis tickFormatter={(v, i) => (i % 2 === 0 ? v : "")} />

The formatter also receives the tick’s index, so you can skip every other tick, highlight endpoints, or otherwise vary the output positionally.

CartesianGrid

Horizontal and/or vertical guide lines behind the plot area. Dashed by default; supply dashArray="none" for solid.

<CartesianGrid
  stroke="#334155"
  strokeOpacity={0.75}
  dashArray="4 6"
  horizontal={true}
  vertical={false}
/>

Place <CartesianGrid> before your shapes so grid lines paint underneath. Toggle horizontal / vertical for grid-only-in-one-direction effects.