Line chart

Pro

Change over time. 2px lines, a 10% wash for areas, a gap where data is missing (never a bridged line). A crosshair snaps to the nearest point and the tooltip lists every series there; arrow keys step through points. Up to four series get end labels unless they'd collide.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/line-chart

Brings in: chart-frame, data, locale, scale

Usage

TSX · The example above

"use client"

import { LineChart } from "@/components/line-chart"
import type { Series } from "@/lib/data"

const weeks = ["Sep 8", "Sep 15", "Sep 22", "Sep 29", "Oct 6", "Oct 13", "Oct 20", "Oct 27", "Nov 3"]

const coverage: Series[] = [
  { id: "all", label: "All code", values: [0.68, 0.7, 0.69, null, 0.72, 0.74, 0.73, 0.76, 0.78] },
  { id: "changed", label: "Changed files", values: [0.55, 0.61, 0.66, null, 0.7, 0.79, 0.83, 0.86, 0.88] },
]

export default function Example() {
  return (
    <LineChart
      className="max-w-xl"
      title="Test coverage"
      subtitle="Weekly · api repository"
      x={weeks}
      series={coverage}
      format="percent"
      state={{ kind: "partial", note: "Sep 29 is missing: that week’s CI run didn’t finish." }}
    />
  )
}

<LineChart>

Prop	Type	Default	Description
titlerequired	`string`	—	What the chart shows, above it.
subtitle	`string \| undefined`	—	A line under the title, e.g. the period or unit.
xrequired	`string[]`	—	The labels along the x axis, one per point.
seriesrequired	`Series[]`	—	One value per x label per series; null leaves a gap.
area	`boolean \| undefined`	false	Fills under each line with a light wash.
format	`ValueFormat \| undefined`	"number"	How values are written: number, percent (0–1), currency (USD) or duration (seconds). Defaults to number.
zeroBased	`boolean \| undefined`	false	Starts the y axis at zero instead of fitting it to the data; areas always start at zero.
state	`ChartState \| undefined`	—	Loading, empty, partial or error. Defaults to ready.
height	`number \| undefined`	—	The plot's height in pixels. Defaults to 220.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under lineChart in <LocaleProvider strings={{ … }}>; the table is exported as lineChartStrings.

Key	English
noData	No data
over	{series} over {from} to {to}
chartValues	Chart values; use the table view to read them all