Charts

All chart components ship from @tollerud/ui. They inherit Tollerud tokens from globals.css — no extra charting library install.

import {
  TimeSeriesChart,
  TIME_SERIES_PRESETS,
  BarChart,
  AreaChart,
  Donut,
  SegmentBarChart,
  Sparkline,
  Gauge,
} from '@tollerud/ui'

Interactive wide SVG chart for dates + values. Fully keyboard accessible (≥ 4.8.42): Tab focuses the chart and activates the latest point, ←/→ step through points with the crosshair and tooltip following, Home/End jump to the ends, Esc clears — and screen readers hear each keyboard-selected point. A visually-hidden data table (srTable, on by default; ≥ 4.8.45) exposes every point to screen readers. Pass series instead of data for multiple lines (≥ 4.8.46) — shared crosshair, stacked tooltip, palette-cycled colors. Use curve="step" for prices held between samples. Pass ranges with TIME_SERIES_PRESETS or custom durationMs filters, or filter data yourself and omit ranges.

Compact inline SVG trend. Add curve="step", fill, and interactive for price-style micro charts — common in DataTable cells. Interactive sparklines (≥ 4.8.43) get a tooltip and keyboard navigation (Tab, ←/→, Home/End, Esc) with screen-reader announcements; pass formatValue and ariaLabel for meaningful output. The SVG is clipped to its viewBox so stroke bleed at small sizes (e.g. 84×26) is prevented.

Area/line chart for simple dashboards. Static and decorative by default; add interactive (≥ 4.8.43) for a crosshair, tooltip, and full keyboard navigation (Tab, ←/→, Home/End, Esc) with screen-reader announcements plus a visually-hidden data table (srTable; ≥ 4.8.45). Pass labeled points ({ value, label }) so tooltips, announcements, and the table name each point; plain number arrays keep working. Fluid width with round markers at any size (≥ 4.8.47 — plotted in real pixels, not a stretched viewBox). Use TimeSeriesChart when you need dates, ranges, or axes.

Vertical bars with optional yellow accent on one series. Values render above each bar; pass formatValue to format them. Add interactive (≥ 4.8.44) for focusable bars: Tab reaches the chart, ←/→ move between bars, Home/End jump, Esc dismisses — each bar announces its label and value to screen readers, and hover or focus shows a tooltip. Bar-height transitions respect prefers-reduced-motion. For multiple series (≥ 4.8.49), pass series + categories for grouped bars, or add stacked for stacked bars — palette-cycled with a legend.

Donut chart with segment legend and percentages. Segment colors are optional (≥ 4.8.44) — omitted colors cycle the --chart-1…5 palette (also exported as CHART_SERIES_COLORS). Add interactive for a focusable legend: Tab reaches it, ↑/↓ move between rows, hover or focus highlights the arc, dims the others, and reveals the raw value — each row announces label, value, and share to screen readers. Add fluid (≥ 4.8.48) to scale the ring down to fit narrow containers (capped at size, stays circular; legend wraps below).

Radial dial for a single metric — disk %, load, quota (≥ 4.8.50). A 270° arc fills from bottom-left clockwise. Set tone (default/success/warning/error, token-backed like Meter) to signal thresholds, min/max for a custom range, and formatValue for the centered number. Exposes role=meter with the aria value range; the arc animation respects prefers-reduced-motion. Add fluid to scale it to the container. Complements the linear Meter.

Horizontal stacked proportion bar (≥ 4.15.0) — one rounded bar showing parts of a whole, with in-bar percentage labels and a two-column legend below. Segment colors default to SEGMENT_BAR_COLORS (yellow-on-noir intensity scale). Add interactive for focusable segments with tooltips and keyboard navigation (←/→, Home/End, Esc).

Calendar activity heatmap (≥ 4.8.51) — GitHub-contributions style. Pass data of { date, value }; cells are laid out as week columns × weekday rows and bucketed into four intensity levels (a yellow-on-noir scale, overridable via colors). Hover a cell for a date + value tooltip; the grid is aria-hidden with a visually-hidden data table as the screen-reader surface. Set weekStartsOn, startDate/endDate, formatValue/formatDate, and showLegend as needed.