EventRaster
EventRaster stacks per-source event ticks in lanes on one shared time domain.
- encodes
- position (x = time, y = lane)
- precision
- high / medium
- nodes
- 1 path per lane, cap 12
- collection
- Frontier
EventRaster draws one tick per event and one lane per source, all on a shared time domain. A vertical band means those
sources fired together, a diagonal means one triggered the next, and a sparse row means silence. Lanes stay aligned to
that shared domain because the banding is the phenomenon the chart exists to show. One tick is always one event; the
single exception is overflow="bin", and the summary discloses it.
Install
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] },];Try it
- hover · rove · click…
Hover or use ↑/↓ for lanes and ←/→ for events — each announces its lane, time, and position.
import { EventRaster } from "@microcharts/react/event-raster/interactive";// services — real values under “Sample data” below<EventRaster data={services}/>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] },];When to use it
Use it for service events across sources, agent steps, and cron or sensor triggers. For a single lane use RugStrip; for continuous rates use Sparkline.
Sizing
Variants
Edge cases
An empty lane keeps its row, because a source that stopped firing is part of the reading. When a lane is dense enough
that its ticks would alias into a solid smear, overflow="bin" (the default) switches that lane to per-bucket counts
drawn as opacity, and the summary names the lanes that were binned. overflow="clip" opts out and keeps one tick per
event at any density.
Four homes
Service events this hour — checkout-api busiest, 9 events.
| checkout | 9 | |
| auth | 7 | |
| search | 4 |
Best at KPI/card scale — multi-lane rasters need height per series.
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
Accessibility
The accessible name summarizes 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, press Escape, or
press outside the chart. 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.