Event Timeline
A horizontal event timeline for visualising point events (pins) and span events (blocks) with row packing, grouping, collapsing, selection, and viewport callbacks.
Basic Point Events
8 point events across a 24-hour window with different colours.
Basic Span Events
6 span events with overlapping durations — overlapping spans stack into separate rows.
Mixed Events with Groups
3 groups (Frontend, Backend, DevOps) with a mix of point and span events.
Collapsible Groups
Click the chevron to collapse/expand groups. Collapsed groups show a presence band.
Selection & Click
Click an item to select it. Selection fires callbacks that update the output below.
—
Selected: —
Viewport Visibility
Items fire onItemVisible when they enter the scroll viewport.
0
Large Dataset with Now Marker
50+ items across 7 days with the red "now" marker and scrollable overflow.
Size Variants
Small (sm)
Medium (md)
Large (lg)
Timezone Support
Timeline labels display in the selected timezone. Click the badge in the header spacer or use the buttons below.
--
Configurable Tick Intervals
Switch between auto and fixed tick intervals. Events remain at precise times.
Drag-to-Pan
Drag left/right on the timeline body or axis to pan the viewport. Use Shift+scroll for fine-grained panning.
--