Vertical bars with rounded tops, grid lines, optional stacked series, grow-in motion and a hover tooltip.
npx shadcn@latest add https://hyperblur.dev/r/bar-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bar-chart.tsx.
import { BarChart } from "@/components/hyperblur/bar-chart"
<BarChart height={200} data={[{ label: "Mon", value: 84 }, { label: "Tue", value: 126 }, { label: "Wed", value: 112 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; value2?: number }[] | required | One entry per bar. Add value2 to stack a second series on top. |
| color | string | "#2f7bff" | Color of the first series. |
| color2 | string | "#6b7a99" | Color of the stacked second series. |
| height | number | 200 | Chart height in pixels. Width fills the parent. |
| showGrid | boolean | true | Draw horizontal grid lines. |
| valueFormatter | (n: number) => string | Formats axis ticks and tooltip values. Defaults to Intl compact notation. | |
| seriesLabels | [string, string] | ["Value", "Other"] | Names of the two series shown in the tooltip when stacked. |
| locale | string | "en-US" | Locale for the default number formatting. |
| animate | boolean | true | Grow bars from the baseline on mount. |