Components
Loading preview...
Here is Area Chart component
npx shadcn@latest add https://21st.dev/r/bklitai/area-chart"use client";
import {
AreaChart,
Area,
Grid,
XAxis,
ChartTooltip,
} from "@/components/ui/area-chart";
const chartData = Array.from({ length: 30 }, (_, i) => ({
date: new Date(2024, 0, i + 1),
revenue: Math.floor(8000 + Math.sin(i / 5) * 4000 + ((i * 11) % 2000)),
costs: Math.floor(5000 + Math.cos(i / 4) * 2000 + ((i * 7) % 1500)),
}));
export default function AreaChartDemo2() {
return (
<div className="w-full">
<AreaChart data={chartData} aspectRatio="4 / 1">
<Grid horizontal />
<Area
dataKey="revenue"
fill="var(--chart-line-primary)"
fillOpacity={0.3}
strokeWidth={2}
/>
<Area
dataKey="costs"
fill="var(--chart-line-secondary)"
fillOpacity={0.2}
strokeWidth={1.5}
/>
<XAxis />
<ChartTooltip />
</AreaChart>
</div>
);
}