All components
Bar Chart Mini
Data DisplayA compact bar chart whose bars grow in sequence and show values on hover.
1219822142718
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/bar-chart-mini.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/bar-chart-mini.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | - | Values to plot, in order. |
| labels | string[] | - | Optional label per bar, shown in the tooltip. |
| showValues | boolean | false | Print each value under its bar as well as on hover. |
| formatValue | (value: number) => string | toLocaleString | Formats the number in the tooltip and the value row. |
Accessibility
- Values are readable as text via showValues, not only on hover.
- The tooltip anchors to the bar, so it never jitters with the pointer.
- Heights are relative to the maximum, so any range renders sensibly.
- Hover changes bar colour and shows a value, so it is not colour-only.
Dependencies
motionclsxtailwind-merge