Seismogram

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" />

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

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

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,];

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, press Escape, or press outside the chart. On touch, a tap pins and a drag scrubs.

Props

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.