React event raster chart — multi-lane event ticks for sync at a glance. Tiny accessible SVG microchart; RSC-safe static or /interactive.

EventRaster answers "when did each source fire — and do sources fire together, in sequence, or not at all?". Vertical bands reveal synchronization, diagonals reveal propagation, and sparse rows reveal silence. One tick is always one event — the only exception is the disclosed overflow="bin" mode for aliasing lanes.

EventRaster

interactive · 5.64 kB · static · 2.65 kB

Install

Import & usereact/event-raster

import { EventRaster } from "@microcharts/react/event-raster";// services — real values under “Sample data” below<EventRaster data={services} title="Service events" />

Sample data

const services = [  { label: "api", events: [2, 5, 6, 14, 20, 21, 33, 40, 41, 48, 55] },  { label: "db", events: [3, 6, 15, 21, 34, 41, 55] },  { label: "cache", events: [6, 21, 41, 55] },  { label: "queue", events: [10, 30, 50] },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — service events across sources, agent steps, cron / sensor triggers.
Avoid for — a single lane (RugStrip) or continuous rates (Sparkline).

Sizing

Variants

emphasis

Edge cases

empty lane (silence is signal)

an aliasing lane switches to binned counts (disclosed)

single lane, single event

Four homes

Why this default

Lanes stay aligned to a shared time domain because vertical banding — several sources firing at the same instant — is the phenomenon the chart exists to reveal. An empty lane is kept, not dropped: silence is signal. When a lane is so dense that ticks would alias into a solid smear, it switches to per-bucket counts shown as opacity, and the summary says which lanes were binned — the encoding change never hides. That is overflow="bin", the default; overflow="clip" opts out and keeps one tick per event whatever the density.

Accessibility

The accessible name summarises the field — "3 lanes, 22 events; busiest api (11)." The interactive entry roves lanes with ↑/↓ and events with ←/→, announcing each event's lane, time, and position within the lane.

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*	{ label, events }[]	One lane per source.
emphasis	string	Accents one lane — the sync read.
labels	boolean	Left-gutter lane names (on ≤ 8 lanes).
overflow	"bin" \| "clip"	Aliasing lanes bin to counts (disclosed).
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.