Taskbar in EJ2 JavaScript Gantt control

25 Mar 202524 minutes to read

Taskbar template

You can design your own taskbars to view the tasks in Gantt by using taskbarTemplate property. And it is possible to map the template script element’s ID value to this property. It is also possible to customize the parent taskbars and milestones with custom templates by using parentTaskbarTemplate and milestoneTemplate properties.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
			parentID: 'ParentID'
        },
		rowHeight:60,
		milestoneTemplate:'#MilestoneTemplate',
		parentTaskbarTemplate:'#ParentTaskbarTemplate',
		taskbarTemplate: '#TaskbarTemplate'
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>EJ2 Gantt</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Typescript Gantt Controls">
      <meta name="author" content="Syncfusion">
      <link href="index.css" rel="stylesheet">
      <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
      <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
      <script src="es5-datasource.js" type="text/javascript"></script>
   <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

   <body>
      <script type="text/x-jsrender" id="TaskbarTemplate">
      <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"  style="height:100%">
         <div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
            <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
         </div>
      </div>
   </script>

   <script type="text/x-jsrender" id="ParentTaskbarTemplate">
      <div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="height:100%">
         <div class="e-gantt-parent-progressbar-inner-div e-gantt-parent-progressbar" style="width:${ganttProperties.progressWidth}px;height:100%">
         <span class="e-task-label" style="position: absolute; z-index: 1; font-size: 12px; color: white; top: 5px; left: 10px; font-family: "Segoe UI"; overflow: hidden; text-overflow: ellipsis; width: 40%; cursor: move;">${taskData.TaskName}</span>
      </div>
      </div>
   </script>
   <script type="text/x-jsrender" id="MilestoneTemplate">
      <div class="e-gantt-milestone" style="position:absolute;">
         <div class="e-milestone-top" style="border-right-width:15px;border-left-width:15px;border-bottom-width:15px;"></div>
         <div class="e-milestone-bottom" style="top:15px;border-right-width:15px; border-left-width:15px; border-top-width:15px;">
      </div>
      </div>
   </script>
      <div id="container">
         <div id="Gantt"></div>        
      </div>
   <script>
   var ele = document.getElementById('container');
   if(ele) {
   ele.style.visibility = "visible";
   }   
   </script>
   <script src="index.js" type="text/javascript"></script>
   </body>
</html>

Taskbar customization

Taskbar Height

Height of child taskbars and parent taskbars can be customized by using taskbarHeight property. The following code example shows how to use the property.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
		    parentID: 'ParentID'
        },
		taskbarHeight:50,
		rowHeight: 60
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

NOTE
The taskbarHeight value should be lower than the rowHeight property value and these properties accept only pixel values.

Conditional formatting

The default taskbar UI can be replaced with custom templates using the queryTaskbarInfo event. The following code example shows customizing the taskbar UI based on task progress values in the Gantt control.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
		    parentID: 'ParentID'
        },
		queryTaskbarInfo: function(args) {
            if (args.data.Progress == 50) {
                    args.progressBarBgColor = "red";
                } else if (args.data.Progress == 70) {
                    args.progressBarBgColor = "yellow";
                } else if (args.data.Progress == 80) {
                    args.progressBarBgColor = "lightgreen";
                }
		}
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Change gripper icon in taskbar

You can change the gripper icon in the taskbar by applying styles to their respective class elements.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Edit, ej.gantt.Sort, ej.gantt.Filter);

var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			resourceInfo: 'resources',
            duration: 'Duration',
            progress: 'Progress',
			dependency: 'Predecessor',
            parentID: 'ParentID'
        },
		columns: [
            { field: 'TaskID', headerText: 'Task ID', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '250' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
			{ field: 'resources', headerText: 'Resources', width: '200' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
		resourceFields: {
            id: 'resourceId',
            name: 'resourceName',
        },
        resources: projectResources,
		allowSorting: true,
		editSettings: {
		   allowEditing:true,
           allowTaskbarEditing:true
         },
		allowFiltering: true
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Multi taskbar support in project view

The Gantt component, supports rendering multi-taskbars in the project view. With this feature the parent taskbar, when it is collapsed, visually summarize the progress of all its child taskbars.

This feature can be enabled by setting the enableMultiTaskbar property value to true.

The following code example shows how to use this property.

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Selection);

var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
		    parentID: 'ParentID',
            expandState: 'isExpand'
        },
        enableMultiTaskbar: true,
    });
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Connector lines

The width and background color of connector lines in Gantt can be customized using the connectorLineWidth and connectorLineBackground properties. The following code example shows how to use these properties.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
			dependency:'Predecessor',
            progress: 'Progress',
		    parentID: 'ParentID'
        },
		connectorLineBackground:"red",
		connectorLineWidth:3
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

In the Gantt control, you can enable or disable the mouse hover tooltip for the following UI elements using the tooltipSettings.showTooltip property:

Taskbar
Connector line
Baseline
Event marker

index.js
index.html
ej.gantt.Gantt.Inject(ej.gantt.DayMarkers);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height:'450px',
    taskFields: {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    baselineStartDate:"BaselineStartDate",
    baselineEndDate:"BaselineEndDate",
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
    },
    eventMarkers: [
        {
            day: '04/10/2019',
            label: 'Project approval and kick-off' 
        }
    ],
    renderBaseline:true,
    baselineColor:'red',
    tooltipSettings:{
        showTooltip:true
    }
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

The default value of the tooltipSettings.showTooltip property is true.

The default tooltip in the Gantt control can be customized using the tooltipSettings.taskbar property. You can map the template script element’s ID value or template string directly to this property.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
			parentID: 'ParentID'
        },
		tooltipSettings: {
            showTooltip: true,
            taskbar: '#taskbarTooltip'
	    }
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <script type="text/x-jsrender" id="taskbarTooltip">
	        <div>TaskID: ${TaskID}</div>
        </script>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Connector line tooltip

The default connector line tooltip in the Gantt control can be customized using the tooltipSettings.connectorLine property. You can map the value to this property as template script element ID or template string format. The following code example shows how to use the tooltipSettings.connectorLine property.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
         dataSource: GanttData,
		 height:'450px',
		 taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
		    progress: 'Progress',
			dependency: 'Predecessor',
            parentID: 'ParentID'
        },
		tooltipSettings: {
            showTooltip: true,
            connectorLine: '#dependencyLineTooltip'
        }
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <script type="text/x-jsrender" id="dependencyLineTooltip">
            <div>Offset : ${offsetString}</div>
        </script>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

A baseline tooltip can be customized using the tooltipSettings.baseline property. The following code example shows how to customize the baseline tooltip in Gantt.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
         dataSource: GanttData,
		 height:'450px',
		 taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
			baselineStartDate:"BaselineStartDate",
			baselineEndDate:"BaselineEndDate",
            progress: 'Progress',
		    parentID: 'ParentID'
        },
		tooltipSettings: {
            showTooltip: true,
            baseline: '#baselineTooltip'
        },
	    renderBaseline:true,
		baselineColor:'red'
		
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <script type="text/x-jsrender" id="baselineTooltip">
            <div>Baseline StartDate : ${this.getFormatedDate(BaselineStartDate)}</div>
        </script>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

A timeline tooltip can be customized using the tooltipSettings.timeline property. This allows modifying the appearance and content of the tooltip displayed over the timeline. The following code example shows how to customize the timeline tooltip in Gantt.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
        dataSource: GanttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
			parentID: 'ParentID'
        },
		tooltipSettings: {
            showTooltip: true,
            timeline: '#timelinetemplateTooltip'
        }
});
ganttChart.appendTo('#Gantt');
function getTooltipData(startDate, endDate, tier) {
    var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
    var activeTasks;
    if (tier === 'topTier') {
        activeTasks = gantt.currentViewData.filter(function(task) {
            var taskStart = new Date(task.StartDate);
            var taskEnd = new Date(task.EndDate);
            taskStart.setHours(0, 0, 0, 0);
            taskEnd.setHours(0, 0, 0, 0);
            return taskStart >= startDate && taskEnd <= endDate;
        });    
    }
    else {
        activeTasks = gantt.currentViewData.filter(function(task) {
            var taskStart = new Date(task.StartDate);
            var taskEnd = new Date(task.EndDate);
            taskStart.setHours(0, 0, 0, 0);
            taskEnd.setHours(0, 0, 0, 0);
            return taskStart.getTime() === startDate.getTime() && taskEnd.getTime() === endDate.getTime();
        });
    }
    var milestones = activeTasks.filter(function(task) {
        return task.Duration === 0;
    });
    var totalProgress = activeTasks.reduce(function(acc, task) {
        return acc + (task.Progress ? task.Progress : 0);
    }, 0);    
    var overallProgress = (activeTasks.length > 0) ? (totalProgress / activeTasks.length).toFixed(2) : 0;
    return {
        activeTasks: activeTasks.length,
        milestones: milestones.length,
        overallProgress: overallProgress
    };
}
function topTierTooltip(value, date, tier) {
    var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
    var endDate;
    var startdate = new Date(date);
    if (gantt.timelineSettings.topTier.unit) {
        endDate = new Date(startdate.getTime());
        endDate.setDate(startdate.getDate() + 6);
    }
    var data = getTooltipData(startdate, endDate,tier);
    return generateTooltipMarkup(value, data);  
}
function generateTooltipMarkup(label, tooltipData) {
    var themeIsDark = document.body.classList.contains('tailwind3-dark') ||
    document.body.classList.contains('fluent2-dark') ||
    document.body.classList.contains('material3-dark') ||
    document.body.classList.contains('bootstrap5.3-dark') ||
    document.body.classList.contains('fluent2-highcontrast') ||
    document.body.classList.contains('highcontrast') ||
    document.body.classList.contains('fluent2-dark');

    var borderColor = themeIsDark ?  'black' : 'white';
    return (
        '<div style="padding: 5px;">' +
            '<div style="padding-bottom: 5px; text-align: center; border-bottom: 2px solid ' + borderColor + ';">' +
                '<span style="font-weight: bold; font-size: 14px;">' + label + '</span>' +
            '</div>' +
            '<div style="display: flex; padding-bottom: 5px; padding-top: 9px">' +
                '<span style="font-weight: bold;">Active Tasks:</span>' +
                '<span style="padding-left: 2px;">' + tooltipData.activeTasks + '</span>' +
            '</div>' +
            '<div style="display: flex; padding-bottom: 5px;">' +
                '<span style="font-weight: bold;">Milestones:</span>' +
                '<span style="padding-left: 2px;">' + tooltipData.milestones + '</span>' +
            '</div>' +
            '<div style="display: flex; padding-bottom: 5px;">' +
                '<span style="font-weight: bold;">Overall Progress:</span>' +
                '<span style="padding-left: 2px;">' + tooltipData.overallProgress + '</span>' +
            '</div>' +
        '</div>'
    );
}
function bottomTierTooltip(date, tier) {
    var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
    var startdate = new Date(date);
    if (gantt.timelineSettings.bottomTier.unit) {
        endDate = new Date(startdate.getTime());
    }
    var data = getTooltipData(startdate, endDate,tier);
    return generateTooltipMarkup(date, data);
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.12/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <script type="text/x-jsrender" id="timelinetemplateTooltip">
            ${if(tier == 'topTier')}  
                <div>${topTierTooltip(value, date, tier)}</div>   
            ${/if}
            ${if(tier == 'bottomTier')} 
                <div>${bottomTierTooltip(date, tier)}</div>  
            ${/if}
        </script>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

To perform touch and hold action on a element, refer to tooltip popup.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Taskbar in EJ2 JavaScript Gantt control

Taskbar template

Taskbar customization

Taskbar Height

Conditional formatting

Change gripper icon in taskbar

Multi taskbar support in project view

Connector lines

Enable tooltip

Tooltip template

Taskbar tooltip

Connector line tooltip

Baseline tooltip

Timeline tooltip

Tooltip Touch interaction