# Bar chart

> Bars that grow in and morph between datasets, with a hover readout.

Component · Pro · https://lodeui.com/components/bar-chart

## When to use

- Comparing one measure across categories or periods.

## When not to use

- Trends over many points: use a line or area chart.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { BarChart } from "@/components/ui/bar-chart";

export function Orders() {
  return <BarChart data={[{ label: "Mon", value: 420 }, { label: "Tue", value: 512 }]} height={220} />;
}
```

## API reference

### BarChart

Vertical bars with a y-axis and hover readout.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label; value; color? }[]` | – | Bars in order. |
| height | `number` | `240` | Height in px. |
| yTicks | `number` | `3` | Axis labels. |
| formatValue / color | `(n) => string / string` | – | Tooltip format and default bar color. |

## Accessibility

- role="img"; summarize the key comparison in text.

## Motion

- Bars grow from the baseline with a small stagger and morph between datasets.

## Responsive behavior

- Measures its width; labels thin out above 12 bars.

## Performance

- One rect per bar.

## Notes for AI

- Keep labels short; they sit under each bar.

## Related

- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Funnel chart](https://lodeui.com/components/funnel-chart) — Conversion funnel with overall and step-to-step rates.
- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.