Axis

This guide will show you how to customize the x and y axis of the charts component.

X-Axis

Custom Tick Formatting

To format the labels on the X-axis (e.g., abbreviate months from January to Jan based on locale):

<XAxis dataKey="date" tickFormatter={chart.formatDate({ month: "short" })} />

Rotate X-Axis Labels

If labels overlap, rotate them for better readability:

<XAxis dataKey="name" angle={-45} textAnchor="end" />

Adjust X-Axis Padding

Control the spacing between the first and last tick labels:

<XAxis dataKey="name" padding={{ left: 20, right: 20 }} />

Hide X-Axis

If you need to remove the X-axis completely:

<XAxis hide />

Custom X-Axis Labels

Render custom labels using a function:

<XAxis dataKey="name" tick={{ fontSize: 12, fill: "blue" }} />

Y-Axis

Set Domain

Define the minimum and maximum values manually:

<YAxis domain={[0, "dataMax + 100"]} />

Format Labels

For example, converting values to percentages:

<YAxis tickFormatter={(value) => `${value}%`} />

Adjust Width

Control the space allocated to Y-axis labels:

<YAxis width={50} />

Hide Y-Axis

To remove the Y-axis from the chart:

<YAxis hide />

Custom Grid Lines

Enable or remove grid lines tied to the Y-axis:

<YAxis tickLine={false} axisLine={false} />

Additional Customizations

Multiple X or Y Axes

Overlay multiple axes in a single chart:

<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />

Reference Lines

Highlight a specific value with a reference line:

<ReferenceLine y={1000} stroke="red" label="Threshold" />

Axis Ticks and Lines

Remove the tick and axis lines by setting them to false.

<XAxis tickLine={false} axisLine={false} />
<YAxis tickLine={false} axisLine={false} />