About
An animated SVG line chart that plots trends across labeled data points with linear, smooth, or stepped curves, hover/keyboard point inspection, a toggleable legend, and an accessible data table.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Line Chart to your project and fits it to your theme.
Code
How Line Chart is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import LineChart from "@/components/ui/line-chart";
const data = [
{ label: "Jan", revenue: 186 },
{ label: "Feb", revenue: 205 },
{ label: "Mar", revenue: 237 },
{ label: "Apr", revenue: 273 },
{ label: "May", revenue: 209 },
{ label: "Jun", revenue: 314 },
];
export default function Demo() {
return (
<div className="w-full max-w-2xl p-6">
<LineChart
data={data}
series={[{ key: "revenue", label: "Revenue" }]}
variant="smooth"
/>
</div>
);
}
More by luv-jeri
View all
Pixel Swap
26
Radial Chart
Pie Chart
Infinite Spiral Gallery
Dither Sculpture