Project Timeline
A Project Timeline Chart is an interactive visualization that displays data in a time-based sequence. It supports both single-date events and date ranges (start to end), making it highly effective for tracking tasks, milestones, and deadlines.
Users can:
Drag and drop to move across the timeline.
Scroll and zoom to adjust scale from milliseconds to years.
Automatically adjust the time scale to best fit the data.
The Project Timeline is rendered using HTML DOM, which enables flexibility in styling through CSS.
Best Situations to Use
Use a Project Timeline chart when:
Tracking project deadlines and progress across different phases.
Updating and monitoring status changes during a project lifecycle.
Managing task dependencies, milestones, and schedules.
Visualizing long-term timelines (e.g., multi-year roadmaps).
Examples:
Visualizing a software development project timeline.
Tracking marketing campaign stages.
Monitoring construction project milestones.
Planning academic year schedules.
Variations
The Project Timeline chart can be styled using different timeline, milestone, and task properties, enabling customization such as:
Highlighting today’s marker.
Customizing milestone appearance.
Styling task blocks for clarity.
Properties
General
Component Name – Auto-generated unique identifier.
Position (Left, Top) – Placement coordinates on the canvas.
Height / Width – Chart dimensions.
Initial Visibility – Show/hide chart on load.
Max Button – Enable maximize option.
Date Formatting – Define date/time display format.
Tooltip
Show/hide tooltips for events or tasks.
Supported options: None, Default.
Customize tooltip background, border, opacity, font size, width, and precision.
Background & Styling
Gradient rotation, opacity, and multi-color options.
Borders (color, radius, width).
Shadows with configurable color and transparency.
Timeline Styles
Timeline Position – Adjust placement of the timeline axis.
Today Marker – Customize color and size of today’s indicator.
Show Major Labels – Display larger time intervals.
Show Minor Labels – Display smaller intervals for detail.
Marker Border Color – Customize marker outlines.
Font Settings – Configure label font color, size, weight, family, and style.
Milestone Styles
Add/edit milestone ranges with custom colors.
Define milestone border width, font color, size, weight, family, and style.
Task Styles
Customize task box appearance.
Show Overflow Text – Enable/disable overflow handling.
Configure font properties (color, size, weight, family, style).
Title & Subtitle
Show/hide title and subtitle.
Customize text (color, size, weight, style, alignment, decoration).
Option to display dataset description dynamically.
Export Options
Enable context menu for quick export.
Supported formats: Excel, CSV, JPEG, PNG, PPT, PDF, Print.
Customize export heading, subheading, and file name.
Define global export type (Screenshot or Tabular).
Example Use Cases
Project Management: Track deadlines, dependencies, and milestones.
Marketing: Visualize campaign launch phases.
Product Development: Monitor agile sprints and releases.
Education: Plan semester schedules and assignment deadlines.
Sample Data Setup:
Category Field: Category (e.g., Task name).
Start Date Field: Start Date.
End Date Field: End Date.
⚠️ Note:
Supports both point-in-time events (single dates) and date ranges.