Chart.XAxis

Ticks and labels along the bottom.

JanFebMarAprMayJun01020304050
Chart of Projects published over 6 points
monthProjects published
January24
February31
March28
April35
May42
June38
<Chart.XAxis tickFormatter={(value) => `${value}`.slice(0, 3)} />

API

PropTypeDefault
axisLinebooleanfalseDraw the line along the axis itself.
hidebooleanfalseKeeps the scale but draws nothing — useful behind a bar's own labels.
minTickGapnumber8Minimum pixels between two labels before ticks start being dropped.
tickCountnumber5Target number of ticks. The scale rounds it to readable intervals.
tickFormatter((value: string | number) => string)Formats each label. Use it for units, dates and locale.
tickLinebooleanfalseDraw the short mark beside each label.
tickMarginnumber8Gap between the axis and its labels.

Plus every <g> prop. Source: chart/components/chart-x-axis.tsx.

Ticks are dropped rather than rotated when labels would collide, which is what minTickGap controls. If labels are being clipped instead, the fix is margin on Chart.Root — the axes draw inside the root's box.