Horizontal bar list for data visualization with interactive bars and customizable formatting.
npx shadcn@latest add @preskok/bar-listimport { BarList } from "@/components/ui/preskok-ui/bar-list"
const data = [
{ name: "Sales", value: 1200, key: "sales" },
{ name: "Marketing", value: 800, key: "marketing" },
{ name: "Support", value: 600, key: "support" },
{ name: "Development", value: 400, key: "development" },
]
export function BarListDemo() {
return (
<BarList
data={data}
valueFormatter={(value) => `$${value.toLocaleString()}`}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
data | Array<Bar<T>> | [] | Array of data items to display |
valueFormatter | (value: number) => string | (value) => value.toString() | Function to format values |
showAnimation | boolean | false | Enable bar animation |
onValueChange | (payload: Bar<T>) => void | - | Callback when bar is clicked |
sortOrder | "ascending" | "descending" | "none" | "descending" | Sort order for bars |
className | string | - | Additional CSS classes |
type Bar<T> = T & {
key?: string
href?: string
value: number
name: string
}12,400
9,800
4,200
3,100
Selected: Dashboard
12,400
9,800
4,200
3,100
Selected: Dashboard