Docs
Bar List
Bar List
Displays a list of items with horizontal bars representing values.
New Users
Purchases
Documents
Engagement
Page Views
2,453
1,830
1,650
1,120
940
Installation
Usage
import { BarList } from "@/components/ui/bar-list";const data = [
{
name: "New Users",
value: 2453,
icon: UserCircle2Icon,
},
{
name: "Purchases",
value: 1830,
icon: ShoppingCartIcon,
},
]
<BarList
data={data}
valueFormatter={(value) => `${value.toLocaleString()}`}
/>Examples
Basic usage
New Users
Purchases
Documents
Engagement
Page Views
2,453
1,830
1,650
1,120
940
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Bar<T>[] | [] | Array of objects for each bar to display |
valueFormatter | (value: number) => string | value.toLocaleString() | Function to format the displayed value |
labelFormatter | (label: string) => ReactNode | label => label | Function to format the displayed label |
color | string | hsl(var(--chart-1)) | Color of the bars |
showAnimation | boolean | false | Whether to animate the bars on render |
sortOrder | 'ascending' | 'descending' | 'descending' | Order to sort the bars by value |
className | string | - | Additional CSS class name |
Bar Data Type
The data prop takes an array of objects with the following properties:
type Bar<T> = T & {
key?: string; // Optional unique key
value: number; // Value represented by the bar
name: string; // Name label for the bar
icon?: React.JSXElementConstructor<any>; // Optional icon component
href?: string; // Optional link URL
target?: string; // Optional link target
color?: string; // Optional custom color for specific bar
};