A retro-styled line chart for visualizing trends and data over time, with configurable grid, tooltip, and multi-line support built on Recharts.
import LineChart from "@/components/ui/line-chart";
const data = [
{ month: "Jan", revenue: 186, expenses: 120 },
{ month: "Feb", revenue: 205, expenses: 140 },
{ month: "Mar", revenue: 237, expenses: 160 },
{ month: "Apr", revenue: 273, expenses: 150 },
{ month: "May", revenue: 309, expenses: 190 },
{ month: "Jun", revenue: 350, expenses: 210 },
];
export default function LineChartDemo() {
return (
<div className="w-full max-w-2xl p-6 border rounded-lg bg-background">
<h3 className="text-lg font-bold mb-1">Revenue vs Expenses</h3>
<p className="text-sm text-muted-foreground mb-4">January - June 2024</p>
<LineChart
data={data}
index="month"
categories={["revenue", "expenses"]}
strokeColors={["#2563eb", "#f97316"]}
valueFormatter={(value) => `$${value}`}
/>
</div>
);
}