Line Chart

Cards

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 CompactTrendLineChartDemo() {
  return (
    <div className="w-full max-w-sm rounded-lg border border-border bg-card p-4">
      <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
        Illustrative latency
      </p>
      <h3 className="mb-1 text-lg font-semibold text-foreground">
        18 ms latest measurement
      </h3>
      <p className="mb-3 text-sm text-muted-foreground">
        Six observations across a tuning session.
      </p>
      <LineChart
        title="Latency trend"
        ariaLabel="Latency measurements in milliseconds: 42, 36, 44, 29, 24, 18"
        series={[
          {
            label: "Latency",
            points: [
              { value: 42 },
              { value: 36 },
              { value: 44 },
              { value: 29 },
              { value: 24 },
              { value: 18 },
            ],
          },
        ]}
        height={160}
        curve="linear"
        showArea
        showAxis={false}
        showLabels={false}
        showPoints={false}
      />
    </div>
  );
}