# Bar List (/charts/bar-list)





<ComponentPreview name="bar-list-demo" description="A horizontal bar list showing data visualization." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/bar-list
```

## Usage [#usage]

```tsx
import { 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()}`}
    />
  )
}
```

## Props [#props]

| 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         |

### Bar Data Type [#bar-data-type]

```tsx
type Bar<T> = T & {
  key?: string
  href?: string
  value: number
  name: string
}
```

## Examples [#examples]

<ComponentPreview name="bar-list-demo" description="Formatted values, animated bars, interactive selection, and a linked row." />

## Features [#features]

* **Responsive design** - Adapts to container width
* **Interactive bars** - Click handling with onValueChange
* **Custom formatting** - Flexible value formatting
* **Sorting options** - Multiple sort orders
* **Animation support** - Smooth bar transitions
* **Link support** - Clickable bars with href
* **Accessibility** - Proper ARIA labels and keyboard navigation