React seismogram chart — high-frequency amplitude trace at word width. Tiny accessible SVG microchart; RSC-safe static or /interactive.

Seismogram answers "when did things happen, and how hard?". Ticks read as a seismograph trace — centered on a midline and flaring symmetrically: presence is density texture, length is intensity. Long series collapse via max-per-bucket only — the spike is the chart's whole job, so it always survives, and the summary is always computed from the raw values, never the buckets.

Seismogram

interactive · 5.05 kB · static · 2.58 kB

Install

Import & usereact/seismogram

import { Seismogram } from "@microcharts/react/seismogram";// burstsPerMinute — real values under “Sample data” below<Seismogram data={burstsPerMinute} title="Error bursts" />

Sample data

const burstsPerMinute = [  1, 2, 1, 3, 2, 6, 2, 1, 0, 2, 1, 4, 9, 3, 1, 2,  0, 1, 3, 2, 7, 2, 1, 0, 2, 1, 5, 11, 3, 1, 2, 1,];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — error bursts per service, alert density, activity texture in rows.
Avoid for — level tracking (Sparkline) or labeled events (EventTimeline).

Sizing

Variants

barcode

signed shocks

flag anomalies

locale

format also takes Intl.NumberFormatOptions — with a locale, the accessible summary's peak number follows that locale's own grouping ("12.500" in German, not "12,500"). Tick positions and lengths are unaffected; only the announced peak is localized.

Edge cases

quiet strip

long series — spikes survive downsampling

Four homes

Why this default

A centered seismograph trace over bottom-anchored bars: the symmetric flare reads as event intensity rather than inviting the bar-to-bar magnitude comparison the strip is too small to support — and it stays visually distinct from SparkBar. Barcode mode is documented as presence-only — a uniform tick is not intensity. anomaly flags spikes at or above a threshold in the alert token; the flag is redundant with tick length, never color alone. A quiet strip renders its baseline at rest, never a blank hole.

Accessibility

The accessible name counts the events — "29 events, peak 11.", or "No events." for a quiet strip. The interactive entry steps slots with position readouts ("Point 2 of 5: 3."), announces quiet slots as "no data", and Home/End jump to the first/last event.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data*	(number \| null)[]	Per-slot event intensity; 0/null = quiet.
mode	"intensity" \| "barcode"	Barcode collapses heights — pure occurrence density.
positive	"up" \| "down"	Polarity coloring of signed ticks.
anomaly	number	Flag spikes: \|v\| ≥ threshold flares in the alert token.
domain	[number, number]	Fixed intensity scale across rows.
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.