Task labels in Angular Gantt component
18 Oct 202517 minutes to read
Task labels in the Angular Gantt component display key task information directly on or near taskbars, enhancing project visualization without requiring task interaction. Configured via the labelSettings property, labels show details like task names, IDs, or progress, streamlining workflows for resource management and status tracking. Labels support three positions: left labels outside the taskbar for identifiers like TaskName, right labels after the taskbar for metrics like Progress, and task labels overlaid on taskbars for prominent data like task titles. Left and right labels remain visible regardless of taskbar width, while task labels may clip for short tasks. Labels improve readability and provide immediate context, reducing the need for hovers or dialogs in large projects.
Configure task labels
Task labels are configured using the labelSettings property, mapping fields from the data source defined in taskFields (e.g., id to TaskID, name to TaskName). The component supports three label positions with specific use cases:
- leftLabel: Displays content like task names or resource assignments to the left of taskbars, ideal for identifiers.
- rightLabel: Shows metrics like progress percentages or durations to the right, suitable for completion data.
- taskLabel: Overlays content like task titles or progress on taskbars, prominent but limited by taskbar width.
Use template literals for formatted labels, such as ${Progress}% for progress percentages. Ensure valid taskFields mappings to reference fields accurately.
The following example configures labels for task names, IDs, and progress:
export class AppComponent {
public taskSettings: object = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
public labelSettings: object = {
leftLabel: 'TaskName',
rightLabel: 'TaskID',
taskLabel: '${Progress}%'
};
public data: object[] = [
// Task data array.
];
}This code displays task names on the left, task IDs on the right, and formatted progress percentages on taskbars, ensuring clear visualization.
Customize labels with templates
For advanced scenarios, you can create custom label templates that provide complete control over label content and formatting
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { projectNewData } from './data';
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="taskData" [taskFields]="taskSettings" [labelSettings]="labelSettings" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public taskData?: object[];
public taskSettings?: object;
public labelSettings?: object;
public columns?: object[];
public projectStartDate?: Date;
public projectEndDate?: Date;
public ngOnInit(): void {
this.taskData = projectNewData;
this.taskSettings = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentId',
};
this.labelSettings = {
leftLabel: 'Task Id: ${taskData.TaskId}',
rightLabel: 'Progress Value: ${taskData.Progress}',
taskLabel: '${Progress}%'
}
this.projectStartDate = new Date('03/28/2019');
this.projectEndDate = new Date('04/18/2019');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt Chart DataSource
*/
export let projectNewData: Object[] = [
{ TaskId: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
{ TaskId: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentId: 1 },
{ TaskId: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentId: 1 },
{ TaskId: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentId: 1 },
{ TaskId: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Indicators: [ { 'date': '04/10/2019', 'name': '#briefing', 'title': 'Product concept breifing', }]},
{ TaskId: 6, TaskName: 'Market Research',StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
{ TaskId: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 6,},
{ TaskId: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentId: 7, },
{ TaskId: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentId: 7, },
{ TaskId: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentId: 6, },
{ TaskId: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentId: 6, },
{ TaskId: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '10', ParentId: 6, Indicators: [ { 'date': '04/20/2019', 'name': '#meeting', 'title': '1st board of directors meeting', } ] },
{ TaskId: 13, TaskName: 'Product Design and Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
{ TaskId: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 30, Predecessor: '12', ParentId: 13, },
{ TaskId: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '12', ParentId: 13, },
{ TaskId: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '15', ParentId: 13, },
{ TaskId: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '15', ParentId: 13, },
{ TaskId: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 13 },
{ TaskId: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '17', ParentId: 18, },
{ TaskId: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '17', ParentId: 18, },
{ TaskId: 21, TaskName: 'Development of the final design', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 13, },
{ TaskId: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '19,20', ParentId: 21, },
{ TaskId: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '22', ParentId: 21, },
{ TaskId: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '23', ParentId: 21, },
{ TaskId: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 30, Predecessor: '24', ParentId: 13, },
{ TaskId: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '25', ParentId: 13, },
{ TaskId: 27, TaskName: 'Design complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '26', ParentId: 13, Indicators: [ { 'date': '05/18/2019', 'name': '#meeting', 'title': '2nd board of directors meeting', } ] },
{ TaskId: 28, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '27' },
{ TaskId: 29, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '28ss' },
{ TaskId: 30, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, Predecessor: '28,29' },
{ TaskId: 31, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 5, Predecessor: '30' },
{ TaskId: 32, TaskName: 'Feedback and Testing', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
{ TaskId: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 45, Predecessor: '31', ParentId: 32, },
{ TaskId: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, Predecessor: '33', ParentId: 32, },
{ TaskId: 35, TaskName: 'Final Product Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
{ TaskId: 36, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '34', ParentId: 35, },
{ TaskId: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '36ss', ParentId: 35, },
{ TaskId: 38, TaskName: 'Final Product', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
{ TaskId: 39, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '37', ParentId: 38 },
{ TaskId: 40, TaskName: 'Marketing and presales', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '39', ParentId: 38 }
];This code creates a left label with priority-based icons (e.g., red for high priority) and a right label with a progress bar, improving visual feedback. For responsive designs, ensure templates adapt to narrow screens, as task labels may be clipped on short taskbars.
Conditional label display with icons:
Create templates that show different content based on task properties:
// Left label template with conditional logic.
public leftLabelTemplate: string = `
<div class="custom-left-label">
<span *ngIf="data.Priority === 'High'" class="priority-high">🔴</span>
<span *ngIf="data.Priority === 'Medium'" class="priority-medium">🟡</span>
<span *ngIf="data.Priority === 'Low'" class="priority-low">🟢</span>
</div>
`;
// Right label template with progress indicators.
public rightLabelTemplate: string = `
<div class="custom-right-label">
<div class="progress-container">
<span class="progress-text">%</span>
<div class="progress-bar" [style.width.%]="data.Progress"></div>
</div>
<span class="duration-text"> days</span>
</div>
`;
public ngOnInit(): void {
this.labelSettings = {
leftLabel: leftLabelTemplate,
rightLabel: rightLabelTemplate
}
}Rich content labels with multiple data points:
Display complex information with formatted content and calculations:
// Task label template with multiple data points.
public taskLabelTemplate: string = `
<div class="rich-task-label">
<div class="task-info">
<strong></strong>
<small> - </small>
</div>
<div class="task-meta">
<span class="resource-count" *ngIf="data.Resources">
👥
</span>
<span class="progress-badge"
[class]="'progress-' + getProgressClass(data.Progress)">
%
</span>
</div>
</div>
`;
public ngOnInit(): void {
this.labelSettings = {
taskLabel: taskLabelTemplate
}
}
// Component method for progress classification.
getProgressClass(progress: number): string {
if (progress >= 80) return 'high';
if (progress >= 40) return 'medium';
return 'low';
}