This sample demonstrates how the Gantt Chart timeline adapts to different time scales (hours, days, and months), helping users visualize project schedules at varying levels of detail.
|
Timeline Range
|
|
|
Timeline Unit Size
|
|
|
Top Tier
|
|
|
Count
|
|
|
Unit
|
|
|
Format
|
|
|
Bottom Tier
|
|
|
Count
|
|
|
Unit
|
|
|
Format
|
|
|
Multiple Taskbars
|
|
This demo illustrates how to customize the timeline settings in a Gantt Chart. It covers: Timeline Date Range: Define the timeline view's start and end dates using viewStartDate and viewEndDate. Timeline Cell Width: Adjusted using the timelineUnitSize property. Cell Combination: Merge multiple timeline cells using the count property. Timeline Units: Supports minutes, hours, days, weeks, months, and years. Units can be configured for both top and bottom tiers. Timeline Format: Customizable by modifying the format value for each tier. Multiple Taskbars: Enabled with enableMultiTaskbar to display multiple taskbars within a collapsed parent row. Feature Modules: Gantt component features are segregated into individual modules. To enable selection and date marker support, inject the Selection and DayMarkers These settings highlight how the timeline can be customized to support different tiers, unit sizes, and ranges, while also enabling multiple task visualization within the same view. More information on the Essential® JS2 Gantt Chart can be found in this documentation section.