Task Labels in React Gantt Chart Component
31 Jan 202612 minutes to read
Task labels in the React Gantt Chart 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:
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const labelSettings = {
leftLabel: 'Task Id: ${TaskID}',
rightLabel: 'Task Name: ${taskData.TaskName}',
taskLabel: '${Progress}%'
};
...
}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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const labelSettings = {
leftLabel: 'Task ID: ${TaskID}',
rightLabel: 'Task Name: ${taskData.TaskName}',
taskLabel: '${Progress}%'
};
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/18/2019');
return <GanttComponent dataSource={data} taskFields={taskFields} labelSettings={labelSettings} height='450px' projectStartDate={projectStartDate} projectEndDate={projectEndDate}>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, LabelSettings, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const labelSettings: LabelSettings = {
leftLabel: 'Task ID: ${TaskID}',
rightLabel: 'Task Name: ${taskData.TaskName}',
taskLabel: '${Progress}%'
};
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/18/2019');
return <GanttComponent dataSource={data} taskFields={taskFields} labelSettings={labelSettings} height='450px' projectStartDate={projectStartDate} projectEndDate={projectEndDate}>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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.
const leftLabelTemplate = (props: any) => {
const { Priority, TaskName } = props;
return (
<div className="custom-left-label">
{Priority === 'High' && <span className="priority-high">🔴</span>}
{Priority === 'Medium' && <span className="priority-medium">🟡</span>}
{Priority === 'Low' && <span className="priority-low">🟢</span>}
<span>{TaskName}</span>
</div>
);
};
// Right label template with progress indicators.
const rightLabelTemplate = (props: any) => {
const progress = props.Progress || 0;
const duration = props.Duration || 0;
return (
<div className="custom-right-label">
<div className="progress-container">
<span className="progress-text">{progress}%</span>
<div
className="progress-bar"
style={{ width: `${progress}%` }}
/>
</div>
<span className="duration-text">{duration} days</span>
</div>
);
};
const labelSettings: any = {
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.
const getProgressClass = (progress: number): string => {
if (progress >= 80) return 'high';
if (progress >= 40) return 'medium';
return 'low';
};
const taskLabelTemplate = (props: any): JSX.Element => {
const taskName = props.TaskName || props.ganttProperties.taskName;
const startDate = props.StartDate || props.ganttProperties.startDate;
const endDate = props.EndDate || props.ganttProperties.endDate;
const progress = props.Progress ?? props.ganttProperties.progress ?? 0;
const resources = props.Resources || props.ganttProperties.resourceInfo;
const formatDate = (date?: Date): string =>
date ? date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }) : '';
return (
<div className="rich-task-label">
<div className="task-info">
<strong>{taskName}</strong>
<small>
{formatDate(startDate)} – {formatDate(endDate)}
</small>
</div>
<div className="task-meta">
{resources && (
<span className="resource-count">
👥 {resources.length}
</span>
)}
<span className={`progress-badge progress-${getProgressClass(progress)}`}>
{progress}%
</span>
</div>
</div>
);
};
const labelSettings = {
taskLabel: taskLabelTemplate
};