Data

LineChart

The Chart.js line type in chart ink — ink-ramp series, hover readouts.

Preview

components/data/LineChart.jsx

Task completionPlatform avg

The Chart.js line type in chart ink. Series step down the ink ramp; emphasis marks at most one story series in rust; hover shows a mono readout for every series.

Usage

src/components/ui/LineChart.tsx

tsx

import { LineChart } from "@/components/ui/LineChart";

<LineChart
  labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
  showArea
  format={(v) => `${v}%`}
  series={[
    { label: "Task completion", data: [81, 77, 76, 80, 84, 88] },
    { label: "Platform avg", data: [67, 67, 67, 67, 67, 67], dashed: true },
  ]}
/>

API

props

Prop	Type	Default	Description
labels	string[]	—	X-axis labels, one per point.
series	LineSeries[]	—	{ label, data, emphasis?, dashed? } — dashed for comparison baselines.
height	number	180	Plot height in px.
showArea	boolean	false	Soft 8% fill under the first series.
format	(v) => string	—	Hover-readout formatter.
legend	boolean	true	Series legend (auto-hidden for one series).

Tokens consumed

semantic only

--ink-200--ink-400--ink-500--ink-600--rust-500--color-fg-muted--font-mono