Example of Timeline API in React Gantt Component

All Controls
/
Gantt
/
Timeline

This sample allows you to customize the Gantt Chart timeline by adjusting the timeline unit size, header text format, and count for both the top and bottom tiers, and provides an option to enable the multitaskbar feature.

More Details...

Loading....
Description

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.

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® React Gantt Chart can be found in this documentation section.