About
An animated SVG line chart for comparing one or more labeled data series over equally spaced categories, with optional area fill, point markers, value labels and a grid/zero axis.
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
import LineChart from "@/components/ui/line-chart";
export default function EmptyLineChartDemo() {
return (
<div className="w-full max-w-sm rounded-lg border border-border bg-card p-4">
<h3 className="mb-2 text-sm font-semibold text-foreground">
Awaiting measurements
</h3>
<LineChart
title="No measurements yet"
emptyLabel="Waiting for the first run"
series={[]}
height={220}
/>
</div>
);
}
More by purestackstudio
View all
Drop Files