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.
The source data for the component.
A list of colors for each event, by index.
A list of end dates for each event, by index.
A list of ids for each event, by index.
A list of properties for each event, by index. Each properties object works as metadata that can be used for grouping events.
A list of start dates for each event, by index.
A list of titles for each event, by index.
The tooltip details displayed by each event when hovered
The list of properties to group events by.
Whether the component is visible.
The initial date the Timeline should display.
Whether the component takes up space on the canvas if hidden is true.
The amount of margin to render outside of the component.
A list of colors for each event, by index.
The source data for the meta events.
A list of end dates for each event, by index.
A list of start dates for each event, by index.
A list of titles for each event, by index.
A list of colors for each event, by index.
The source data for the milestones.
A list of dates for each event, by index.
A list of titles for each event, by index.
The day of the month when the first quarter of the year starts.
The month when the first quarter of the year starts.
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.
Whether the component remains visible in the editor if hidden is true.
Whether to show a line on the current day in the Timeline.
How much time is visible at once, and the unit of time visible on the timeline's scale.
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.
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.
Scrolls the canvas or parent container so that the selected component appears in the visible area.
Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.