Seismogram
Seismogram traces when events happened and how hard, as ticks centered on a midline.
- encodes
- tick presence (density) + height (intensity)
- precision
- medium — Sparkline for levels, EventTimeline for labeled events
- nodes
- ≤ 2 typical (tick path; +1 flag path, +1 signed midline)
Errors arrive in bursts, and the question is when they hit and how hard. Seismogram centers its ticks on a midline and flares them symmetrically: density is presence, length is intensity. The centered trace keeps the strip from inviting the bar-to-bar magnitude comparison it is too small to support, and keeps it visually distinct from SparkBar. Long series collapse via max-per-bucket only, so a spike always survives, and the summary is computed from the raw values rather than the buckets.
Install
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,];Try it
When to use it
Use it for error bursts per service, alert density, and activity texture in table rows. For level tracking use Sparkline; for labeled events use EventTimeline.
Sizing
Variants
In barcode mode every tick is the same length: it records presence and carries no magnitude.
anomaly flags spikes at or above its threshold in the alert token, on top of the tick length that already shows them,
so the flag never rests on color alone.
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
All-zero data renders the baseline at rest rather than a blank hole. A series longer than the pixel width collapses by max-per-bucket, so a single sharp spike is never averaged away.
Four homes
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."). A quiet slot reads as the zero it is ("Point 1 of 5: 0."), and only a missing sample announces "no data". Home and End jump to the first and 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.