# Bar Chart (/charts/bar-chart)





<ComponentPreview name="bar-chart-preskok-demo" description="A two-series bar chart using the Preskok chart helpers." />

## Installation [#installation]

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

## Usage [#usage]

```tsx
import { BarChart } from "@/components/ui/preskok-ui/bar-chart"

const chartData = [
  { month: "January", Desktop: 186, Mobile: 80 },
  { month: "February", Desktop: 305, Mobile: 200 },
]

const chartConfig = {
  Desktop: { label: "Desktop", color: "#2563eb" },
  Mobile: { label: "Mobile", color: "#60a5fa" },
}

export function BarChartDemo() {
  return <BarChart data={chartData} dataKey="month" config={chartConfig} />
}
```

## Features [#features]

* **Stacked/percent** modes
* **Legend selection** with interactive filtering
* **Config-driven** colors and labels
* **Responsive** container