Critical Path in React Gantt Chart Component

31 Jan 202617 minutes to read

The critical path represents the longest sequence of dependent tasks that determines the minimum project duration. Tasks on the critical path have zero or negative slack (float), meaning any delay in these tasks directly impacts the overall project completion date. The React Gantt Chart component automatically calculates and highlights critical tasks in red with emphasized dependency connector lines when the enableCriticalPath property is enabled. Critical path analysis helps identify which tasks require immediate attention and cannot be delayed without affecting project deadlines.

Understanding critical path calculation

The component uses Critical Path Method (CPM) principles to identify critical tasks through a comprehensive calculation process that analyzes task dependencies, timing relationships, and slack values to determine which tasks have no scheduling flexibility. A task becomes critical when it has zero or negative slack, meaning any delay (even by a minute) shifts the entire project end date. This occurs because critical tasks are linked through dependencies, creating a chain reaction where delays propagate across the dependency network, ultimately affecting the project completion date.

Project end date determination: The calculation begins by determining the overall project end date. If the projectEndDate property is provided, it uses that value as the project completion reference. If projectEndDate is not specified, the component automatically calculates the project end date by examining all task end dates in the data source to find the latest completion point. This reference point determines how much delay each task can tolerate without affecting project completion.

Slack value calculation: For each task, the component calculates slack by measuring the time difference between the task’s end date and the project end date. Slack represents how much time a task can be delayed without affecting the project completion:

  • Zero slack: The task must finish exactly on time. Any delay will push back the project end date, making it critical
  • Negative slack: The task is already behind schedule or creates scheduling conflicts. This occurs when a task’s end date is beyond the project end date, or when dependency relationships create impossible timing constraints.

Parent-Child task relationships: In projects with hierarchical tasks, the critical path calculation focuses on dependencies rather than the parent-child structure used for task organization. For example, if Task 1.1 (a child task) depends on Task 2 (a parent task), only the tasks directly linked by the dependency are evaluated for criticality based on their timing. A parent task like Task 2 being critical does not automatically make its child tasks (e.g., Task 2.1, Task 2.2) critical, nor does a critical child task imply a critical parent. The component evaluates each task’s slack independently, ensuring that only tasks with zero or negative slack, driven by their dependency constraints, are marked as critical. This distinction allows precise identification of critical tasks without conflating organizational hierarchy with scheduling dependencies.

Dependency-based analysis: The component analyzes different dependency relationship types to determine slack impacts:

  • Finish-to-Start: When a predecessor task ends after its successor should start, negative slack results from the timing conflict
  • Start-to-Start: When a predecessor starts after its successor should start, the component calculates negative slack based on scheduling impossibility
  • Finish-to-Finish and Start-to-Finish: These relationships can also produce negative slack when timing conflicts exist between connected tasks
  • Offset and scheduling mode handling: When dependencies include time offsets (e.g., “+2 days” or “-1 hour”), the component adjusts slack calculations by factoring in the offset duration. The calculation differs for automatically scheduled versus manually scheduled tasks: automatic tasks use forward and backward pass algorithms to compute slack, while manual tasks compare their end dates directly against the project completion date.

Progress consideration: The component considers task completion progress. Only tasks with less than 100% progress can be marked as critical, since completed tasks cannot cause future delays. Tasks that end on or beyond the project end date automatically become critical regardless of their dependency relationships, as they directly determine the project completion timing.

Critical path setup and configuration

Critical path functionality requires the CriticalPathService to be injected in the providers array. The data source must contain tasks with valid start dates, end dates, and task dependencies properly mapped through the dependency field in taskFields.

Enable critical path display by setting enableCriticalPath to true, or add the CriticalPath option to the toolbar array to allow interactive toggling. The getCriticalTasks() method retrieves all tasks identified as critical at runtime.

The critical path recalculates automatically when task properties change, including start and end dates, duration modifications, dependency updates, or progress adjustments. This ensures the visualization remains accurate throughout project management workflows.

The following example demonstrates enabling critical path analysis:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, CriticalPath } 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 editOptions = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    const toolbarOptions = ['CriticalPath'];
    return <GanttComponent dataSource={data} taskFields={taskFields} enableCriticalPath={true}
        editSettings={editOptions} toolbar={toolbarOptions} height='450px'>
        <Inject services={[Edit, CriticalPath, Toolbar]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Toolbar, ToolbarItem, CriticalPath } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
    };
    const editOptions: EditSettingsModel = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    const toolbarOptions: ToolbarItem[] = ['CriticalPath'];
    return <GanttComponent dataSource={data} taskFields={taskFields} enableCriticalPath={true}
        editSettings={editOptions} toolbar={toolbarOptions} height='450px'>
        <Inject services={[Edit, CriticalPath, Toolbar]} />
    </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%;
        }

        .e-gantt .e-gantt-chart .e-custom-holiday {
            background-color: lightgreen;
        }
    </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>

The code enables critical path analysis by setting enableCriticalPath to true and injecting the CriticalPathService. The component automatically calculates slack values for all tasks and highlights those with zero or negative slack as critical tasks, displaying them with red taskbars and emphasized dependency lines.

Customizing critical path appearance

The queryTaskbarInfo event provides access to the isCritical property for each task, enabling custom styling beyond the default red highlighting. Modify the taskbarBgColor, progressBarBgColor, or other visual properties to create distinct visual indicators for critical tasks.

The following example demonstrates custom styling for critical tasks using the queryTaskbarInfo event:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Toolbar, CriticalPath } 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 editOptions = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    function queryTaskbarInfo(args) {
        if ((args.data.isCritical || args.data.slack === '0 day') && !args.data.hasChildRecords) {
            args.taskbarBgColor = 'rgb(242, 210, 189)';
            args.progressBarBgColor = 'rgb(201, 169, 166)';
        }
    }
    const toolbarOptions = ['CriticalPath'];
    return <GanttComponent dataSource={data} taskFields={taskFields} height='450px' queryTaskbarInfo={queryTaskbarInfo} enableCriticalPath={true}
        editSettings={editOptions} toolbar={toolbarOptions}>
        <Inject services={[Edit, CriticalPath, Toolbar]} />
    </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Toolbar, ToolbarItem, CriticalPath } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
    const taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID',
    };
    const editOptions: EditSettingsModel = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    };
    function queryTaskbarInfo(args: any): void {
        if ((args.data.isCritical || args.data.slack === '0 day') && !args.data.hasChildRecords) {
            args.taskbarBgColor = 'rgb(242, 210, 189)';
            args.progressBarBgColor = 'rgb(201, 169, 166)';
        }
    }
    const toolbarOptions: ToolbarItem[] = ['CriticalPath'];
    return <GanttComponent dataSource={data} taskFields={taskFields} height='450px' queryTaskbarInfo={queryTaskbarInfo} enableCriticalPath={true}
        editSettings={editOptions} toolbar={toolbarOptions}>
        <Inject services={[Edit, CriticalPath, Toolbar]} />
    </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%;
        }
		 .e-gantt .e-gantt-chart .e-custom-holiday {
           background-color:lightgreen;
        }
    </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>

The event handler checks the isCritical flag and applies custom colors to taskbars, allowing project-specific visual distinctions for critical path tasks while maintaining clear identification of project bottlenecks.

See also