Components
Loading preview...
This is an interactive day-based data chart that visualizes values (like revenue or activity) using minimalistic vertical lines and animated gradient highlights. It’s perfect for dashboards or financial summaries where users need quick, clean visual feedback with a focus on a specific day.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/weekly-kpi-chart"use client";
import {
WeeklyKPIChart,
type DayPoint,
} from "@/components/ui/weekly-kpi-chart";
export default function Demo() {
const sampleData: DayPoint[] = [
{ day: "S", value: 1200 },
{ day: "M", value: 1800 },
{ day: "T", value: 2567 },
{ day: "W", value: 1600 },
{ day: "T", value: 2200 },
{ day: "F", value: 2400 },
{ day: "S", value: 1900 },
];
return (
<div className="w-full max-w-lg mx-auto items-center justify-center">
<WeeklyKPIChart
data={sampleData}
width={500}
height={380}
className="bg-white rounded-lg mt-10"
/>
</div>
);
}