Line chart

Revenue and costs
Point	Revenue	Costs
Jan	40	28
Feb	51	31
Mar	55	34
Apr	59	37
May	70	40
Jun	74	43

When to use #

Use it for

Trends of a few series.
Comparing a metric against a target range.

Skip it when

More than five series; the lines blur together.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/line-chart.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { LineChart } from "@/components/ui/line-chart"

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const lineData = months.map((label, index) => ({ id: label, label, values: { revenue: 40 + index * 6 + ((index * 5) % 7), costs: 28 + index * 3 } }));

const lineSeries = [
  { id: "revenue", label: "Revenue" },
  { id: "costs", label: "Costs" },
];

export function RevenueLines() {
  return (
    <div className="w-full max-w-xl">
      <LineChart label="Revenue and costs" data={lineData} series={lineSeries} unit="k" />
    </div>
  );
}

API reference #

LineChart

component

PropTypeDefault

label *string—

data *readonly ChartDatum[]—

series *readonly ChartSeries[]—

unitstring""

loadingboolean—

errorstring—

classNamestring—

band{ lower: string; upper: string; }—

It exposes slider semantics, with aria-label, aria-busy, aria-hidden, aria-valuemin, aria-valuemax and aria-valuenow kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.