An animated bar chart that compares one measure across a run of days, weeks, or months and lets you scrub any bar with the pointer or arrow keys to read its exact value.
"use client";
import BarChart from "@/components/ui/bar-chart";
const week = [
{ key: "2026-09-14", label: "Mon, Sep 14", axisLabel: "M", value: 32 },
{ key: "2026-09-15", label: "Tue, Sep 15", axisLabel: "T", value: 48 },
{ key: "2026-09-16", label: "Wed, Sep 16", axisLabel: "W", value: 27 },
{ key: "2026-09-17", label: "Thu, Sep 17", axisLabel: "T", value: 61 },
{ key: "2026-09-18", label: "Fri, Sep 18", axisLabel: "F", value: 44 },
{ key: "2026-09-19", label: "Sat, Sep 19", axisLabel: "S", value: 86 },
{ key: "2026-09-20", label: "Sun, Sep 20", axisLabel: "S", value: 67 },
];
export default function BarChartDemo() {
return (
<div className="w-full max-w-md p-6">
<BarChart
data={week}
label="Active minutes"
period="Sep 14\u201320, 2026"
unit="min"
/>
</div>
);
}