πŸš€ Be among the first 100 to subscribe and secure your FusePoint subscription at an exclusive $99/month 🌟

Back

FusePoint Timeline Documentation

Type: webpart

Overview

The FusePoint Timeline web part provides a clean and flexible way to display project milestones, historical events, or process steps on SharePoint pages.
It supports vertical and horizontal layouts, auto-scroll to current step, and now includes full color customization for the timeline line and markers (past, current, and future).


Features

  • Alignment Options – Display the timeline in vertical or horizontal mode.
  • Full Color Customization – Configure colors for:
    • Title
    • Subtitle
    • Description
    • Links (or use the primary theme color)
    • Line Color – Controls the color of the main connecting line.
    • Marker Color (Past) – Color for completed milestones.
    • Marker Color (Current) – Highlight color for the active milestone.
    • Marker Color (Future) – Color for upcoming milestones.
  • Marker Size – Adjust the radius of the circular markers for visual emphasis.
  • Timeline Items – Each item includes:
    • Title (required)
    • Subtitle (required, e.g., date)
    • Description (optional)
    • Link (optional, with β€œopen in new tab” toggle)
    • Is Current Step (yes/no – highlights the current item)
  • Auto Scroll – Automatically scrolls to the current step on load.
  • Responsive Layout – Works seamlessly across devices.

How to Use

Adding the Web Part

  1. Edit your SharePoint page.
  2. Insert the FusePoint Timeline web part into the desired section.

Configuring the Timeline

  1. Alignment – Choose between Vertical or Horizontal layout.
  2. Manage Items – Click Manage to add or edit timeline steps:
    • Title – e.g., β€œVersion 1.0 Released”.
    • Subtitle – e.g., β€œReleased on January 5, 2025”.
    • Description – Optional details or notes.
    • Link – Add an optional URL with display text.
    • Open in new tab – Optional toggle for external links.
    • Is Current Step – Mark this item as the highlighted milestone.
  3. Auto Scroll – Toggle to enable automatic scroll to the current step.
  4. Colors – Configure:
    • Title Color
    • Subtitle Color
    • Description Color
    • Link Color (or use primary theme color)
    • Line Color
    • Marker Color (Past)
    • Marker Color (Current)
    • Marker Color (Future)
  5. Marker Size – Adjust the circle radius to match your layout or design preferences.

User Experience

  • The timeline displays milestones in the chosen alignment.
  • The line and markers use configured colors to distinguish past, current, and future events.
  • Clicking a link opens its associated resource (in a new tab if selected).
  • Current step is visually highlighted.
  • Auto Scroll moves the focus to the active milestone for quick access.

Benefits

  • Complete Customization – Define colors for every visual element of the timeline.
  • Clear Progress Visualization – Perfect for tracking projects, launches, or company milestones.
  • Engaging UX – Smooth scrolling and vibrant highlighting enhance clarity.
  • Responsive Design – Works seamlessly across desktop and mobile SharePoint pages.

Conclusion

The FusePoint Timeline web part delivers a fully customizable, dynamic, and visually appealing way to represent milestones or historical events in SharePoint.
With line and marker color controls, size customization, and auto-scroll to current step, it’s a powerful tool for storytelling, project visualization, and roadmap displays.


FusePoint Timeline Example
FusePoint Timeline Items

Try FusePoint for Free!

No credit card required.

FusePoint

The perfect addition to your SharePoint environments.

$399

$0

USD for 30 Days
then $399/mo

  • 20+ new SPFx webparts
  • 6 SPFx extensions
  • Support
  • Documentation
Try FusePoint

Get your team started now.

Pricing