Line Chart

Installation

npx shadcn@latest add https://brockui.com/r/line-chart

Usage

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

const data = [
  { name: "Revenue", data: [120, 138, 131, 159, 172, 188] },
  { name: "Costs", data: [98, 104, 109, 112, 118, 121] },
];
const labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN"];

export function Example() {
  return (
    <LineChart
      data={data}
      labels={labels}
      height={240}
      emphasisSeries="Revenue"
      source="Brock Analytics, 2026"
    />
  );
}

// Opinionated defaults — but every sub-component is yours to replace via the
// `slots` prop. The crosshair tooltip lists every series at the hovered x.
export function WithCustomTooltip() {
  return (
    <LineChart
      data={data}
      labels={labels}
      slots={{
        tooltip: ({ xLabel, points }) => (
          <div className="border-2 border-brock-accent p-2">
            <div className="font-mono text-[10px] uppercase">{xLabel}</div>
            {points.map((p) => (
              <div key={p.series} className="flex gap-2">
                <span style={{ color: p.color }}>{p.series}</span>
                <span className="font-mono tabular-nums">{p.formatted}</span>
              </div>
            ))}
          </div>
        ),
      }}
    />
  );
}

Props

Accessibility

Design moves

1. 1. Direct line-end labels replace a legend (the FT signature), in each line's color, with vertical collision avoidance.
2. 2. Emphasis, not rainbow: one series in --brock-accent at full weight, the rest muted to a restrained greyscale ramp. No N-color spaghetti.
3. 3. Faint horizontal gridlines – the deliberate, correct deviation from the bar canon's no-gridline rule. Tufte / FT permit them for time-series reading.
4. 4. Honest gaps: a y: null point BREAKS the line into sub-paths – never silently interpolated across missing data.
5. 5. Y domain reads change, not magnitude – a 'nice' auto range NOT forced to zero by default (yBaselineZero opts in for share/percent data).
6. 6. Crosshair + multi-series tooltip snaps to the nearest x and lists every series' value there, sorted descending.
7. 7. Editorial layers: vertical events markers, shaded bands (recession shading), a dashed series for forecasts – all reproduced in the SVG export.
8. 8. A clear empty state (icon + No data message) and a solid loading skeleton in the same Tufte-friendly visual language.

When to use

Line Chart fits continuous series where the X axis is ordered and the story is the trend: metrics over time (revenue, latency, active users), indexed comparisons across entities (countries, cohorts rebased to 100), and fact-vs-forecast (a dashed projection line). Multiple series share one Y domain so they read against each other; emphasis keeps one in focus while the rest provide context.

When not to use

For discrete ordered buckets where each value is independent (days of the week, channels) use Column Chart. For categorical ranking with long labels use Bar Chart. For tiny embedded charts inside metric cards or prose use Sparkline. For composition over time (parts of a whole) use Stacked Area / Stacked Column (coming soon).

Inspired by

• · John Burn-Murdoch, Financial Times – direct labels, emphasis over rainbow, indexed lines, log scale where it tells the truth
• · Financial Times Visual Journalism – sparse axes, source-line attribution, recession shading
• · Stripe Annual Letters – inline numerics in editorial flow
• · Edward Tufte, The Visual Display of Quantitative Information – data-ink discipline, sparklines, small multiples