A multi-series line and area chart built from plain data rows, with animated draw-in lines, halftone fill patterns, a snapping crosshair tooltip and a toggleable legend.
"use client";
import { ChartLine } from "@/components/ui/chart-line";
const data = [
{ month: "Jan", revenue: 4200, expenses: 2800 },
{ month: "Feb", revenue: 5100, expenses: 3100 },
{ month: "Mar", revenue: 4800, expenses: 3400 },
{ month: "Apr", revenue: 6200, expenses: 3600 },
{ month: "May", revenue: 7100, expenses: 3900 },
{ month: "Jun", revenue: 6800, expenses: 4100 },
{ month: "Jul", revenue: 7600, expenses: 4300 },
{ month: "Aug", revenue: 8200, expenses: 4500 },
{ month: "Sep", revenue: 7900, expenses: 4600 },
{ month: "Oct", revenue: 8800, expenses: 4800 },
{ month: "Nov", revenue: 9400, expenses: 5100 },
{ month: "Dec", revenue: 10200, expenses: 5400 },
];
export default function ChartLineDemo() {
return (
<div className="flex w-full max-w-xl items-center justify-center p-6">
<ChartLine
title="Revenue"
description="Jan – Dec 2025"
data={data}
index="month"
series={[
{ key: "revenue", label: "Revenue" },
{ key: "expenses", label: "Expenses" },
]}
valueFormat="currency"
/>
</div>
);
}