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),
desktop: Math.floor(1200 + Math.sin(i / 3) * 600 + ((i * 13) % 400)),
mobile: Math.floor(800 + Math.cos(i / 4) * 400 + ((i * 9) % 300)),
}));
export default function AreaChartDemo5() {
return (
<div className="w-full">
<AreaChart data={chartData}>
<Grid horizontal />
<Area
dataKey="desktop"
fill="var(--chart-line-primary)"
fillOpacity={0.3}
/>
<Area
dataKey="mobile"
fill="var(--chart-line-secondary)"
fillOpacity={0.3}
/>
<XAxis />
<ChartTooltip />
</AreaChart>
</div>
);
}