Line Chart

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the component.

   npx shadcn@latest add @txbrendan/line-chart

Props

• data

  One object per point on the x axis, like { day: "Mon", visits: 1250 }.

  TData[]

• config

  The lines to draw, in order. Colors default to --chart-1 through --chart-5.

  { [key in keyof TData]?: { label: string; color?: string } }

• categoryKey

  The field that names each point, shown on the x axis.

  keyof TData

• title

  A visible title. It names the chart. TypeScript requires title, aria-label, or aria-labelledby.

  ReactNode

• aria-label

  Names the chart when it has no visible title.

  string

• size

  Height: 5, 7, or 9 times --control-h-md, so density scales it.

  "sm" | "md" | "lg" · default "md"

• curve

  How lines join their points. Monotone is smooth and never overshoots a point.

  "linear" | "monotone" | "step" · default "monotone"

• dots

  Marks every point with a dot. A chart with one point always shows it.

  boolean · default false

• valueFormat

  Formats tooltip values, and y axis ticks in short form, like 12.5K.

  Intl.NumberFormatOptions

• locale

  The locale for numbers. Fixed, so server and browser print the same text.

  string · default "en-US"

• legend

  Shows the legend. By default it shows when there are two or more lines. "top" shows it as a key beside the title, with the point under the pointer in place of the tooltip box, and the last point at rest.

  boolean | "top"

• loading

  Shows a soft line shape at the same height. When data arrives, it fades out while the lines draw in.

  boolean · default false

• error

  Shows this message in place of the chart. true shows a default message.

  ReactNode

• onRetry

  Shows a retry button under the error.

  () => void

• emptyText

  Shown when data is empty.

  ReactNode · default "No data yet"

• className

  Extra classes. Later classes win, so className='h-96' replaces the height.

  string

Accessibility

• Renders a <figure> named by its title, or by aria-label. TypeScript requires one.
• Recharts' keyboard layer stays on: Tab focuses the chart, the arrow keys move between points, and the tooltip reads each one out. With the key on top, the key follows the arrow keys too, and the tooltip stays on the page for screen readers only, so each point is still read out.
• The key on top sits beside the title, not in it, so the chart's name never changes as the key moves. Each value holds the width of its longest one, so the key stays still as its numbers roll.
• Each series in the key is a toggle button. A hidden line fades out where it is, leaves the tooltip, and keeps the y axis still. The last one shown cannot hide. Tab reaches these buttons first, then the chart.
• Keeps one height while it loads, draws, fails, or has no data, so the page does not move. When the page prints, it asks the browser to keep a chart that fits on one page whole. In the light theme, it asks the browser to print legend dots and loading shapes even with backgrounds off.
• Loading, the error, and the empty text are read out through a status line that stays on the page.
• Line colors come from --chart-1 to --chart-5, which the theme tests hold to 3:1 against the page. The legend and tooltip name each line in text.
• Lines draw in over three times --motion-duration-base, once the chart is on screen. They finish at once when the page prints. At 0ms they draw at once, and Recharts skips the animation for reduced motion.

Examples

const data = [
  { day: "Mon", desktop: 1250, mobile: 860 },
  { day: "Tue", desktop: 1410, mobile: 920 },
  { day: "Wed", desktop: 1180, mobile: 1040 },
];

<LineChart
  title="Visits by device"
  data={data}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="day"
/>

<LineChart
  title="Visits by device"
  data={[
    { day: "Mon", desktop: 1250, mobile: 860 },
    { day: "Tue", desktop: 1410, mobile: 920 },
    { day: "Wed", desktop: 1180, mobile: 1040 },
  ]}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="day"
  legend="top"
/>

<LineChart
  title="Conversion rate"
  data={[
    { week: "W1", rate: 0.021 },
    { week: "W2", rate: 0.026 },
    { week: "W3", rate: 0.031 },
  ]}
  config={{ rate: { label: "Conversion" } }}
  categoryKey="week"
  dots
  valueFormat={{ style: "percent", minimumFractionDigits: 1 }}
/>

<LineChart
  aria-label="Visits by device"
  data={data ?? []}
  config={{ desktop: { label: "Desktop" }, mobile: { label: "Mobile" } }}
  categoryKey="day"
  loading={isLoading}
  error={error ? "Visits could not load." : undefined}
  onRetry={() => refetch()}
/>