TimelineChart
TimelineChart, TimelineChartProps, TimelineEvent, TimelineTimeAxis and 1 more: generated from the source of active-charts.
Exported by @workspace/. Generated from the package source; part of the index of every export.
Timeline Chart#
Props
- Type
TimelineEvent[] (TimelineEvent & { time: Timeline…
Array of events to display on the timeline. The events, each with its machine time.
- Type
number
Container height in pixels. Width is always responsive.
- Type
StandaloneAccessibility Options
Accessible name, description, data table and keyboard navigation. No announcements: it switches <Chart>'s interaction announcements, which this family does not make.
- Type
boolean
Alternate labels above/below the axis. Default: true.
- Type
StandaloneAnimation Option<"type">
The entrance: on, off, duration, easing and the entrance type (ADR-082, LAB-AT17).
- Type
string
Optional className applied to the outer container.
- Type
string[]
Categorical palette for this chart only: replaces the host palette (--chart- … --chart-) in the chart's colour assignment, and nothing else. It is a data encoding, not a theme: surfaces, text, grid and semantic roles keep coming from the CSS token contract, and a series, datum or annotation that sets its own colour keeps it. Any CSS colour string (a public token reference such as var(--chart-, hex, oklch).
- Type
"ltr""rtl"
The chart's UI direction: the reading direction of its HTML text and chrome (tooltip, legend, menus, the accessible table), and the direction the context menu carries under <body>.
Left out, the chart inherits the direction of the page around it (the nearest dir attribute, else the computed CSS direction) and follows a later change of that attribute. It is never inferred from locale, and it never reverses an axis or reorders data: reversed stays an explicit axis choice. Under rtl the chrome mirrors (legend flow, tooltip side, context menu and submenus, report text in exports), a title-like label starts at the inline start, and a label placed by geometry (an axis tick, a slice or bar label) keeps its physical side; plot arrow keys stay spatial while legend and menu arrows follow the reading direction.
- Type
Omit<…>
- Type
ValuePresentation
Presentation input for axis labels, tooltips, labels and accessibility announcements: a locale code (notation follows the language), or a presentation-context object ({language) carrying language and notation independently. date is the normal human date shape a plain date consumer inherits; an axis that declares its own preset for readability keeps it. Forwarded untouched to the central @workspace/; the package never resolves tenant or application settings itself. When omitted, <Chart supplies it; with neither, the chart throws a configuration error (no 'en' fallback, active-format D14). Object inputs must be referentially stable across renders.
- Type
MarkerShape
The event markers' shape, from the one marker vocabulary of the package. Default: 'circle'. Every shape has the area of the circle of marker.
- Type
number
Marker radius in pixels. Default: 6.
- Type
ChartTranslate Fn
The host translator for every text the chart shows or announces. When omitted, <Chart supplies it; with neither, the chart throws a configuration error (no English fallback, ADR-028).
- Type
TimelineTime Axis
Without a time axis the events are placed in order, evenly. Place the events by time (T9): an event's x is its time on the events' extent, so a long gap is a long distance and equal times share one x; labels move to avoid each other, markers never. The keyboard, the data table and the announcement then read ascending time (equal times in the host's order); the CSV keeps the host's row order and adds the time column. An event without a readable time (an untyped call) puts the whole chart back on ordinal placement, with a development diagnostic.
- Type
StandaloneTooltip Option<…>
Tooltip of the event under the pointer: enabled, renderer and style. The card shows text rows without a value, so no value (ADR-082, LAB-AT17).
- Type
number
Optional fixed width in pixels. Default: fill container.
Events
Called by the component when something happens.
- Type
(event) => void
Fired when a chart animation completes.
'load': initial mount animation finished (or immediately if animation disabled / prefers-reduced-motion is active).'update': data-update transition finished.
Not triggered by zoom animations (use on) or tooltip fades.
- Type
(result) => void
Fired after a successful export action (PNG/SVG/CSV/PDF), including from the context menu and from imperative Chart calls.
- Type
(format, error) => void
Fired when an export could not produce its file (W11), from the handle as well as from the context menu. Without it a failed context-menu export is reported as an error diagnostic (<Chart).
- Type
() => void
Fired exactly once per chart instance, after the first successful mount with valid dimensions and before any entrance animation starts. "Ready" means: the SVG is in the DOM, layout has run with real dimensions, and the chart can be queried by integration tests.
Distinct from on with type: 'load', which fires *after* the load animation finishes. A chart with animation={false} still fires on — animation state has no effect on readiness.
A new React key on the host produces a new component instance and on fires again. Identity changes of the callback itself after the first fire are ignored (latch is per-instance).
Consumer requirement — stable from first render. The latch closes on the first effect run regardless of whether on was defined at that moment. If on is initially undefined and later resolves to a function, the callback will never fire — the latch has already closed with a no-op. Pass a stable reference (typically via use) or pass the final function unconditionally from the first render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Types#
Props for Timeline: ordinal placement (the default: events evenly spaced in the host's order), or, with time, placement by each event's time (T9), which every event then carries.
The props of Timeline, each described in its prop list on this page.
type TimelineChartProps = TimelineChartBaseProps &
(
| {
timeAxis?: undefined;
data: TimelineEvent[];
}
| {
timeAxis: TimelineTimeAxis;
data: (TimelineEvent & {time: TimelineTime})[];
}
);interface TimelineEvent {
date: string;
label: string;
description?: string;
category?: string;
color?: string;
time?: TimelineTime;
}The time axis of a timeline (T9): with it, distance on the timeline is elapsed time. It declares what the event times ARE: calendar days or instants; the CSV writes time in that machine form.
interface TimelineTimeAxis {
temporalSemantic: TemporalSemantic;
}A machine time, read as every temporal axis reads one.
type TimelineTime = Date | number | IsoDateString;