Components
Loading preview...
Here is Area Chart component
npx shadcn@latest add https://21st.dev/r/bklitai/area-chart"use client";
import {
AreaChart,
Area,
XAxis,
ChartTooltip,
PatternLines,
PatternArea,
} 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)),
}));
export default function AreaChartDemo10() {
return (
<div className="w-full">
<AreaChart data={chartData}>
<PatternLines
height={6}
id="area-pattern"
orientation={["diagonal"]}
stroke="var(--chart-1)"
strokeWidth={1}
width={6}
/>
<PatternArea dataKey="desktop" fill="url(#area-pattern)" />
<Area dataKey="desktop" fillOpacity={0} strokeWidth={2} />
<XAxis />
<ChartTooltip />
</AreaChart>
</div>
);
}