A styled area chart for visualizing trends over time with filled gradients, patterned fills, a zoom brush, selectable series, and a shimmering loading state.
"use client";
import AreaChart from "@/components/ui/area-chart";
const chartConfig = {
revenue: {
label: "Revenue",
colors: { light: ["#6366f1"], dark: ["#818cf8"] },
},
expenses: {
label: "Expenses",
colors: { light: ["#f97316"], dark: ["#fb923c"] },
},
};
const data = [
{ month: "Jan", revenue: 186, expenses: 120 },
{ month: "Feb", revenue: 305, expenses: 200 },
{ month: "Mar", revenue: 237, expenses: 190 },
{ month: "Apr", revenue: 273, expenses: 210 },
{ month: "May", revenue: 209, expenses: 180 },
{ month: "Jun", revenue: 314, expenses: 250 },
];
export default function AreaChartDemo() {
return (
<div className="flex h-screen w-full items-center justify-center p-8">
<AreaChart
data={data}
chartConfig={chartConfig}
xDataKey="month"
className="h-80 w-full max-w-2xl"
/>
</div>
);
}