Example of Baseline in Angular Gantt Component

1
Planning phase
7/4/202513 days0 days
2
Initiate phase
7/4/20250 days7/4/20250 days0 days
3
Create job card
7/4/20251 day7/4/20251 day0 days
4
Allot mechanic
7/5/20253 days7/4/20253 days1 days
5
Inspect belt
7/8/20253 days7/9/20253 days0 days
6
Check battery
7/8/20252 days7/7/20252 days1 days
7
Test alternator
7/11/20253 days7/11/20253 days0 days
8
Inspect cooling
7/14/20253 days7/12/20253 days2 days
9
Phase end
7/16/20250 days7/14/20250 days2 days
10
Execution phase
7/16/20258 days0 days
11
Initiate phase
7/16/20250 days7/17/20250 days0 days
12
Change oil
7/17/20251 day7/16/20251 day1 days
13
Replace oil filter
7/18/20253 days7/18/20253 days0 days
14
Replace air filter
7/18/20253 days7/16/20253 days2 days
15
Replace fuel filter
7/21/20252 days7/21/20252 days0 days
16
Replace cabin filter
7/21/20252 days7/19/20252 days2 days
17
Replace spark plugs
7/23/20252 days7/23/20252 days0 days
18
Phase end
7/24/20250 days7/23/20250 days1 days
19
Launch phase
7/24/202511 days0 days
20
Initiate phase
7/24/20250 days7/24/20250 days0 days
21
Refill fluids
7/25/20252 days7/25/20252 days0 days
22
Check brakes
7/27/20252 days7/25/20252 days2 days
23
Refill steering
7/29/20252 days7/28/20252 days1 days
24
Refill transmission
7/29/20252 days7/30/20252 days0 days
25
Lubricate components
7/31/20252 days7/31/20252 days0 days
26
Wheel balancing
8/2/20253 days8/1/20253 days1 days
27
Phase end
8/4/20250 days8/5/20250 days0 days
Planning phase | 7/4/2025 - 7/16/2025 | 13 days
Planning phase
Initiate phase
Create job card
Allot mechanic
Inspect belt
Check battery
Test alternator
Inspect cooling
Phase end
Execution phase | 7/16/2025 - 7/24/2025 | 8 days
Execution phase
Initiate phase
Change oil
Replace oil filter
Replace air filter
Replace fuel filter
Replace cabin filter
Replace spark plugs
Phase end
Launch phase | 7/24/2025 - 8/4/2025 | 11 days
Launch phase
Initiate phase
Refill fluids
Check brakes
Refill steering
Refill transmission
Lubricate components
Wheel balancing
Phase end
Description

In this demo sample, the baseline feature in the Angular Gantt Chart, which helps visualize the variance between planned and actual task schedules. Baselines provide a clear reference for tracking project deviations and are rendered for all task types including child tasks, parent tasks, and milestones.

To enable baselines in the Angular Gantt Chart, set the renderBaseline property to true and define the planned schedule using the baselineStartDate field. You can either specify the baselineEndDate directly or use the baselineDuration property to calculate it automatically. Setting baselineDuration to zero is particularly useful for milestones, as it clearly marks a planned point in time. The appearance of baselines can be customized using the baselineColor property to visually distinguish planned timelines from actual task progress.timelines from actual progress.


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