# Shadcn Animated Monochrome Bars

> Animated monochrome bar chart

- Type: example, free and open source (MIT)
- Component: [Chart](https://reui.io/components/chart.md)
- Page: https://reui.io/components/chart/c-chart-11
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/chart.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/chart.md
- MCP: `get_example("c-chart-11")`
- Registry item: https://reui.io/r/styles/base-nova/c-chart-11.json
- Uses: Badge, Card, Chart

## Best for

Thin bars that widen on hover to print their value, while the header figure follows the hovered month

## Agent notes

- `activeData` is null until a bar is hovered, so the header falls back to a hardcoded 123; show your own total there

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)

## Install

```bash
npx shadcn@latest add @reui/c-chart-11
```

## About Shadcn Chart

### When to use

- Trend cards that plot monthly or weekly figures as bars, areas or a line
- Part to whole breakdowns such as traffic sources, task status or plan tiers as donut and pie slices
- Score profiles across several axes, such as team skills or audit results, as radar or radial bars

### When not to use

- A finished metric card with period tabs, KPI tiles and a range switcher built in: use the [Area Chart blocks](https://reui.io/blocks/chart/area-chart.md)
- Headline numbers with trend badges and no plotted series: use the [Stats blocks](https://reui.io/blocks/application/stats.md)
- A whole overview page with summary tiles above a trend and a work list: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)

### Agent notes

- Replace the sample `chartData` array, and give each series or slice name it uses a `chartConfig` entry with a label and color
- Each example caps its `Card` at `max-w-md` or `max-w-xs`; drop the cap so the chart fills a grid cell
- `ChartContainer` sizes itself by `aspect-video` unless a class overrides it, so set an aspect ratio or height class to fit a fixed tile

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.