Example of Timeline API in React Gantt

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 Cell Width: Adjusted using the timelineUnitSize 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.
  • Cell Combination: Merge multiple timeline cells using the count property.
  • Tooltip Visibility: Controlled with the showTooltip property (enabled by default).
  • Multiple Taskbars: Enabled with enableMultiTaskbar to display multiple taskbars within a parent row.
  • Timeline Date Range: Define the timeline view's start and end dates using viewStartDate and viewEndDate.

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.

Gantt component features are segregated into individual feature-wise modules. To use selection, sorting and marker features, we need to inject the Selection, Sort and DayMarkers into the Inject Services section.


More information on the Essential® React Gantt Chart can be found in this documentation section.