Timeline

The Timeline component visually organizes events, highlighting start and end dates, durations, and overlaps, making it perfect for tracking project tasks or activity history.

Properties

Available properties for Timeline with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameTypeDescriptiondata{ [key: string]: unknown }[]

The source data for the component.

eventColorByIndexcolor[]

A list of colors for each event, by index.

eventEndDateByIndexstring[]

A list of end dates for each event, by index.

eventIdByIndex(string | number | boolean | null | undefined)[]

A list of ids for each event, by index.

eventPropertiesByIndex{ [key: string]: unknown }[]

A list of properties for each event, by index. Each properties object works as metadata that can be used for grouping events.

eventStartDateByIndexstring[]

A list of start dates for each event, by index.

eventTitleByIndexstring[]

A list of titles for each event, by index.

eventTooltipLabelByIndexstring[]

The tooltip details displayed by each event when hovered

groupByunknown[]

The list of properties to group events by.

hiddenboolean

Whether the component is visible.

initialDatestring

The initial date the Timeline should display.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

metaEventColorByIndexstring[]

A list of colors for each event, by index.

metaEventData{ [key: string]: unknown }[]

The source data for the meta events.

metaEventEndDateByIndexstring[]

A list of end dates for each event, by index.

metaEventStartDateByIndexstring[]

A list of start dates for each event, by index.

metaEventTitleByIndexstring[]

A list of titles for each event, by index.

milestoneColorByIndexstring[]

A list of colors for each event, by index.

milestoneData{ [key: string]: unknown }[]

The source data for the milestones.

milestoneDateByIndexstring[]

A list of dates for each event, by index.

milestoneTitleByIndexstring[]

A list of titles for each event, by index.

quarterStartDaynumber

The day of the month when the first quarter of the year starts.

quarterStartMonthnumber

The month when the first quarter of the year starts.

renderOneEventPerRowboolean

Whether to render a single event per timeline row. If false, multiple events will be rendered in each row to reduce the total number of rows as much as possible.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

showTodayIndicatorboolean

Whether to show a line on the current day in the Timeline.

timescalemap

How much time is visible at once, and the unit of time visible on the timeline's scale.

tooltipTextstring

The text to display in a tooltip on hover or focus.

Events

Events are triggered by user interactions with Timeline. Use event handling to trigger queries or other actions in response to events.

NameDescriptionClick event

A user clicks an event bar.

Methods

Methods for interacting with Timeline. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.