OfferLifetime Pro for $99

Line Chart

Lines on one axis with a legend, tooltip and hidden data table. Each series picks its stroke, so Target reads differently from Actual even in one hue; the chart picks its curve and an optional gradient or glow. The last point is marked, and loading, empty and error keep the chart's height.

Data & feedbackFree186 lines · one file

The decision inside it

Strokes tell series apart, not only colour

With a one-hue palette, dashed and dotted lines are what separate a target from the real number, and they survive a greyscale print.

When to use it

Use Line Chart for change over time with one to five series on one axis. Give a target or forecast series stroke: "dashed". Pick curve smooth, linear, step or bump, and effect gradient or glow if you want it.

Installation

How you get it

Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.

Use Layro's Line Chart for this.
Install it: npx shadcn@latest add @layro/line-chart
(the @layro registry is set up in components.json, with LAYRO_KEY in .env.local)
Import it from @/components/ui/line-chart.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.

For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Free components install through the @layro registry with your CLI token: see the Namespaced tab.

Usage

components/signed-chart.tsx
import { ChartCard } from "@/components/ui/chart";
import { LineChart } from "@/components/ui/line-chart";

const data = [
  { week: "Oct 5", signed: 612, target: 600 },
  { week: "Oct 12", signed: 655, target: 600 },
  { week: "Oct 19", signed: 684, target: 600 },
];

export function SignedChart({ loading }: { loading: boolean }) {
  return (
    <ChartCard title="Documents signed" subtitle="Per week">
      <LineChart
        data={data}
        xKey="week"
        loading={loading}
        description="Documents signed per week against a target of 600"
        series={[
          { key: "signed", label: "Signed" },
          { key: "target", label: "Target", stroke: "dashed" },
        ]}
      />
    </ChartCard>
  );
}

API reference

“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.

Props

Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.

PropTypeNotes
datarequiredT[]—
xKeyrequiredkeyof T & string—
seriesrequiredLineSeries[]—
curveLineCurveDefault "smooth".
effectLineEffectDefault "none".
dotsbooleanDraw every point, not only on hover.
endDotbooleanMark the last point of each line. Default true.
format(v: number) => stringValue formatter for the axis, tooltip and table.
xFormat(v: string) => stringLabel formatter for the x-axis and tooltip.
heightnumber—
descriptionrequiredstringAccessible summary, read before the data table.
loadingboolean—
errorReact.ReactNode—
onRetry() => void—
classNamestring—

Dependencies

npm packages

Actualclsxrechartstailwind-merge

Layro foundations, installed alongside it

layro-themechart

States

All of them are drawn by the component. None is left for you to design.

  • Smooth
  • Step
  • Gradient
  • Glow
  • Loading
  • Empty
  • Error

Accessibility

  • Keyboard reachable throughout, in visual order
  • Focus trapped in overlays, Escape closes them
  • Focus returns to whatever opened it
  • Live regions announce what changed, not that something did
  • Honours prefers-reduced-motion

Responsive behavior

  • Sizes to its container, not the viewport
  • Usable from 320px up
  • Pointer-based interaction, so trackpad and touch both work
  • No hover-only affordances

Lifetime access

Every component, and everything we ship next.

  • All 232 components, source included
  • Every template, and everything released after you buy
  • shadcn CLI or download — React 18/19, Tailwind v4
  • One payment. No subscription.
Get lifetime access — $99 $149What is included

More in Data & feedbackAll Data & feedback components

Pro

Composed Chart

Bars, lines and areas on one plot in one unit: actual, plan and forecast together, with a reference rule.

Pro

Radar Chart

Two or three series across five to eight measures, filled or outline, on a polygon or circle grid.

Pro

Radial Chart

Rings for progress and share, full or half circle, each with its own max and a number in the middle.

Pro

Histogram

Raw samples binned for you, with p50/p95/p99 pins and an overflow bin for the long tail.

Pro

Cohort Retention

Cohorts by period as a triangle table, shaded by % retained, with a size-weighted average row.

Pro

Calendar Heatmap

A year of daily counts as week columns, with month labels, five levels and streak stats.