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.
"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 />;
}