Components
A single-series bar chart with gradient or striped fills, highlighted bars, and a hover marker.
"use client"
import { BarChart } from "@/components/ui/bar-chart"Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/bar-chart.jsonAlso installs chart from shadcn/ui if missing.
Usage#
import { BarChart } from "@/components/ui/bar-chart"
<BarChart
data={data}
xKey="week"
yKey="spend"
groupKey="month"
color="var(--color-orange-500)"
highlight={(row) => row.month === "Mar"}
yFormatter={(value) => formatNumber(value, { format: "currency" })}
/>Examples#
Striped#
Set variant to "striped" for diagonal bands. mutedColor defaults to gray; pass the bar color for a tint of the same hue.
"use client"
import { BarChart } from "@/components/ui/bar-chart"Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.