Axis

Customize the axis components in your charts

Installation

No installation is required for the Axis components. You can use it directly in your project.

Usage

Import the <XAxis /> and <YAxis /> components from the recharts library. Then, add the text-[--caption-text-color] class to the className prop to change the color of the axis text. You can also customize the font size, tick line, and axis line by passing the respective props.

import { XAxis, YAxis } from 'recharts';
<YAxis
    className="text-[--caption-text-color]"
    fontSize={12}
    tickLine={false}
    axisLine={false}
/>
<XAxis
    className="text-[--caption-text-color]"
    dataKey="name"
    fontSize={12}
    tickLine={false}
    axisLine={false}
/>