Bar

Learn how to apply styles to your Bar component in Recharts

Installation

No installation is required for the Bar component. You can use it directly in your project.

Usage

Import the <Bar /> component from the recharts library and the area styles from @tailus/themer.

import { Bar } from 'recharts';
import { area } from "@tailus/themer";

To change the color of the <Bar /> component, set the fill prop to currentColor and apply the area styles to the className prop.

<Bar 
    className={area({ gradient:true, intent: "primary" })}
    fill="currentColor"
    radius={[4,4,0,0]}
    dataKey="Primary"
/>

To maintain the original opacity of the fill color in the area styles, set the gradient variant to true. This prevents the fill color from becoming less opaque.

Reference

Although we didn’t create a custom Bar component, you can change the component’s color using the intent variant of the area styles.

Prop
Type
Default
intent
enum
primary

Examples

See the BarChart examples on the Bar Chart page