LineChart

Usage examples

import { LineChart } from '@rookcom/monarch-react/charts';

const DAYS = Array.from({ length: 14 }, (_, i) => new Date(Date.UTC(2026, 2, 1 + i, 12)));

const LATENCY = DAYS.map((date, i) => ({
  date,
  p95: [210, 220, null, null, 260, 240, 410, 380, 250, 230, 225, null, 240, 235][i] ?? null,
}));

const UTC_DAY: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', timeZone: 'UTC' };

<LineChart
  title="p95 latency"
  description="Days with no traffic are gaps"
  variant="area"
  curve="monotone"
  data={LATENCY}
  xKey="date"
  xLabel="Day"
  series={[{ key: 'p95', label: 'p95', color: 3 }]}
  includeZero={false}
  formatValue={(v) => `${v} ms`}
  locale="en-US"
  xFormat={UTC_DAY}
  height={180}
/>

import { useState } from 'react';
import { LineChart } from '@rookcom/monarch-react/charts';

const DAYS = Array.from({ length: 14 }, (_, i) => new Date(Date.UTC(2026, 2, 1 + i, 12)));

const SESSIONS = [820, 932, 901, 934, 1290, 1330, 1320, 1180, 1250, 1400, 1380, 1460, 1510, 1490];

const SIGNUPS = [42, 51, 47, 60, 88, 91, 85, 70, 76, 95, 90, 99, 104, 101];

const TRAFFIC = DAYS.map((date, i) => ({
  date,
  sessions: SESSIONS[i] ?? 0,
  previous: Math.round((SESSIONS[i] ?? 0) * 0.82),
}));

const SIGNUP_DATA = DAYS.map((date, i) => ({ date, signups: SIGNUPS[i] ?? 0 }));

const UTC_DAY: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', timeZone: 'UTC' };

function SyncedDemo() {
  const [active, setActive] = useState<number | null>(null);
  return (
    <>
      <LineChart
        title="Sessions"
        data={TRAFFIC}
        xKey="date"
        xLabel="Day"
        series={[{ key: 'sessions', label: 'Sessions' }]}
        locale="en-US"
        xFormat={UTC_DAY}
        height={160}
        activeIndex={active}
        onActiveIndexChange={setActive}
      />
      <LineChart
        title="Sign-ups"
        data={SIGNUP_DATA}
        xKey="date"
        xLabel="Day"
        series={[{ key: 'signups', label: 'Sign-ups', color: 2 }]}
        locale="en-US"
        xFormat={UTC_DAY}
        height={160}
        activeIndex={active}
        onActiveIndexChange={setActive}
      />
    </>
  );
}

<SyncedDemo />

Purpose

Shows how one or more measures change over time or across ordered categories, with exact values one hover, tap or arrow key away and the full data as a table.

Design principles

• One value axis. Different scales get separate charts, synced through activeIndex, never a dual axis.
• Gaps are honest: a missing value breaks the line instead of drawing a fake segment, and a lone point gets a dot.
• Recessive grid and axes, 2px lines, colour slots in fixed order; colours follow the series, so hiding one never repaints the rest.
• Exact values on demand (tooltip), not on every point.
• Every number and date goes through Intl with the locale prop.

API reference

import { LineChart } from '@rookcom/monarch-react/charts';

Renders ChartFrame (ref to its <figure>); every ChartFrame prop except children, legend and table passes through, and LineChart builds the legend and table from series and data.

data is an array of plain objects; xKey names the x field (Date, number or label) and each series key names a numeric field. Missing, null or non-finite values are gaps.

Pass locale when rendering on the server so server and browser format numbers and dates the same way.

Generated from the TypeScript declarations of packages/react/src/components/charts/line-chart.

Properties

Variants

States

Interaction behaviour

• Hovering or tapping the plot inspects the nearest point; the tooltip flips to stay inside the chart.
• Moving the mouse out clears it; a tap keeps the last position until the next tap.
• Legend entries toggle their series (legendToggle), controlled with hiddenSeries or uncontrolled with defaultHiddenSeries.
• activeIndex + onActiveIndexChange share one crosshair between charts with the same x values.
• onPointSelect runs on click, Enter or Space at the inspected point, for drill-in.

Keyboard support

Accessibility

Role

figure (ChartFrame); the plot is a group with aria-roledescription "chart"

Accessible name

The figure is named by title; the plot by a generated summary (points, then low / high / latest per series, then reference lines) or summary.

• The SVG is aria-hidden; the summary, a live region and the data table carry the information.
• While inspecting with the keyboard, a polite live region announces "Mar 4: Sessions 1,204, Previous 988".
• The tooltip is visual only (aria-hidden), so pointer hovering does not flood screen readers.
• A hint ("Use the arrow keys to inspect values.") is the plot's description.
• The data table lists every series, hidden ones included, with row and column headers.
• Series differ by label and, where set, dash pattern, not by colour alone.
• Every string, including the summary sentences, is translatable through labels.

Responsive behaviour

• The chart measures its container (ResizeObserver) and lays out at that width, so text never scales; it works down to 320px.
• X labels thin out to keep about 72px between them; the first and last stay.
• Before the width is known (server render, first paint) it draws at 640px scaled to fit, so the markup matches on hydration.
• Touch: tap to inspect; vertical page scrolling stays available (touch-action: pan-y).

Theme support

• Series use --mn-color-data-1 … -5, contrast-checked per theme; a sixth series and later fall back to the neutral slot.
• Grid, ticks, crosshair and reference lines use border and text tokens; the tooltip uses the raised surface and shadow.
• Light, dark and high-contrast themes follow the tokens with no extra CSS. Reduced motion: the only motion is the tooltip fade, which uses duration tokens that become 0ms.

Do and don't

Related components

• ChartFrame: The frame LineChart renders; use it directly for custom charts.
• BarChart: Comparisons across categories or discrete periods.
• Sparkline: A tiny trend without axes, for tables and cards.
• StatCard: One headline number with its trend.

Dependencies

Hand-written SVG with no charting library (docs/adr/0010-charts-rendering-and-colour.md). Scales, paths, tooltip, legend and axes come from src/internal/charts.

Testing coverage

• One line per series, legend, generated summary, keyboard hint; no axe violations.
• Keyboard: Tab focuses the plot and inspects the first point; arrows, Home, End, Escape; live region announces; leaving clears the tooltip.
• Hover inspects the nearest point with a crosshair and flipped tooltip, without announcing; leaving clears it.
• Gaps split the path and a lone point gets a dot; a single series has no legend.
• Legend toggle hides a series (uncontrolled) and keeps the other colour; controlled hiddenSeries and activeIndex.
• onPointSelect from Enter and click.
• Locale-aware numbers and dates (de-DE currency and long month).
• Area, monotone curve, dots and reference lines (also in the summary); fixed y domain and custom summary.
• Empty data shows the empty state; loading passes through; the table lists every series.
• Renders on the server at the fallback width.

Tests: packages/react/src/components/charts/line-chart