Strategic Journey Timeline
Lay out a product or project roadmap on a horizontal timeline. Items appear as milestone dots or date-range spans, arranged in alternating lanes above and below a central spine. Cards display title, subtitle, and status with color-coded markers.
Examples
When to Use
- Product roadmaps with phases and milestones
- Project timelines showing planned vs. completed work
- Strategy presentations with key dates and deliverables
- Onboarding journeys or customer lifecycle mapping
Data Roles
Settings
Timeline
Show Today Line
booleanDraw a vertical line at today's date.
Default:trueSpine Thickness
numberWidth of the central timeline spine (1–8 px).
Default:2Lane Gap
numberVertical space between the spine and each card lane (10–80 px).
Default:26Card Band Height
numberHeight of each card lane area (80–500 px).
Default:210Cards
Min Width
numberMinimum card width in pixels (80–300).
Default:120Max Width
numberMaximum card width in pixels.
Default:170Corner Radius
numberRounded corners for cards (0–20 px).
Default:8Shadow
booleanApply a drop shadow to cards.
Default:trueCard Text
Title Font Size
numberFont size for card titles (8–36).
Default:12Subtitle Font Size
numberFont size for card subtitles (7–32).
Default:10Markers
Milestone Radius
numberRadius of milestone dot markers (3–20 px).
Default:7Span Thickness
numberThickness of span bars (1–12 px).
Default:4Connector Opacity
numberOpacity of lines connecting cards to the spine (0.08–1).
Default:0.42Common settings like Legend, Tooltip, and Color Scheme are covered in Shared Concepts.
Tips & Best Practices
- Items with both Start Date and End Date render as spans; items with only a Milestone Date render as milestone dots
- Use the Lane field to manually place cards above or below the spine (top/bottom)
- The Status field drives both the color and the legend — keep status labels concise for best readability