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 SignedAreaLineChartDemo() {
return (
<div className="w-full max-w-xl rounded-lg border border-border bg-card p-4">
<LineChart
title="Change from the release baseline"
ariaLabel="R1 minus 32 percent, R2 minus 12, R3 plus 8, R4 plus 24, R5 plus 36"
series={[
{
label: "Change",
points: [
{ label: "R1", value: -32 },
{ label: "R2", value: -12 },
{ label: "R3", value: 8 },
{ label: "R4", value: 24 },
{ label: "R5", value: 36 },
],
},
]}
minValue={-40}
maxValue={40}
valueSuffix="%"
height={280}
showArea
showValues
/>
</div>
);
}
More by purestackstudio
View all
Drop Files