Chart

Dashboards 6

About

Themed Recharts charts for line, bar, area, pie and radar data, with tooltips, legends and a shared config. Drop them into analytics dashboards and reports.

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

Code

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

Usage.tsx

"use client";

import { ChartLine } from "@/components/ui/chart";
import type { ChartConfig } from "@/components/ui/chart";

const monthly = [
  { month: "Jan", revenue: 4200, expenses: 2800 },
  { month: "Feb", revenue: 5100, expenses: 3100 },
  { month: "Mar", revenue: 4800, expenses: 2950 },
  { month: "Apr", revenue: 6200, expenses: 3400 },
  { month: "May", revenue: 7000, expenses: 3600 },
  { month: "Jun", revenue: 7600, expenses: 3900 },
];

const trendConfig: ChartConfig = {
  revenue: { label: "Revenue" },
  expenses: { label: "Expenses" },
};

export function ChartPreview() {
  return (
    <div className="w-full max-w-lg">
      <ChartLine data={monthly} config={trendConfig} xKey="month" />
    </div>
  );
}

export default function Demo() {
  return <ChartPreview />;
}