Weekly KPI Chart

Dashboards 81

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Weekly KPI Chart to your project and fits it to your theme.

Code

How Weekly KPI Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  WeeklyKPIChart,
  type DayPoint,
} from "@/components/ui/weekly-kpi-chart";

const settings = {
  width: 500,
  height: 380,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  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={s.width}
        height={s.height}
        className="bg-white rounded-lg mt-10"
      />
    </div>
  );
}