Example of Tooltip Template in Angular Gantt Component

This sample explains the way of rendering tooltip template for taskbar and baseline by mapping template elements to the property of taskbar and baseline in tooltipSettings.

1
Project initiation
4/2/20244/5/20244 days0
2
Identify site location
4/2/20244/2/20240 days304/2/20244/2/2024Martin Tamer
3
Perform soil test
4/2/20244/5/20244 days2FS04/1/20244/4/2024Rose Fuller
4
Soil test approval
4/5/20244/5/20240 days3FS304/6/20244/6/2024
5
Project estimation
4/8/20244/15/20246 days15
6
Develop floor plan for estimation
4/8/20244/10/20243 days4FS304/5/20244/7/2024
7
List materials
4/11/20244/15/20243 days6FS04/9/20244/12/2024Fuller King
8
Estimation approval
4/15/20244/15/20240 days7FS04/16/20244/16/2024Construction Supervisor
9
Sign contract
4/16/20244/16/20241 day8FS304/16/20244/17/2024Construction Supervisor
10
Project approval and kick off
4/16/20244/16/20240 days9FS04/17/20244/17/2024
11
Site work
4/17/20244/22/20244 days15
12
Clear the building site
4/17/20244/18/20242 days9FS304/16/20244/18/2024
13
Install temporary power service
4/19/20244/22/20242 days12FS04/17/20244/19/2024
Project initiation
Identify site location
Martin Tamer
Perform soil test
Rose Fuller
Soil test approval
Project estimation
Develop floor plan for estimation
List materials
Fuller King
Estimation approval
Construction Supervisor
Sign contract
Construction Supervisor
Project approval and kick off
Site work
Clear the building site
Install temporary power service
Description

Tooltip can be enabled or disabled using tooltipSettings.showTooltip property.In this demo, the tooltip template is rendered for taskbar and baseline using the tooltipSettings.taskbar and tooltipSettings.baseline properties.

The baseline feature enables the user to view the deviation between the planned dates and the actual dates of the tasks in a project. Baselines can be enabled in Gantt chart by enabling the renderBaseline property along with mapping the data source values for baselineStartDate and baselineEndDate properties.

Gantt control features are segregated into individual feature-wise modules.To use a selection and markers, inject the SelectionService and DayMarkersService into the @NgModule.providers section respectively.