Critical Path and Slack

The critical path is the chain of tasks that controls the calculated project finish date. In Microsoft Project terms, critical tasks usually have zero total slack: if one slips, the project finish slips. The Gantt plugin computes this path from the final scheduled graph and highlights it visually.

Source code

TypeScript ts

import { GANTT_CRITICAL_PATH_ANALYSIS_DEMO } from './gantt-advanced-data';
import { loadAdvancedGanttDemo } from './GanttAdvancedVanillaDemo';

export function load(parentSelector: string) {
  return loadAdvancedGanttDemo(parentSelector, GANTT_CRITICAL_PATH_ANALYSIS_DEMO);
}

Vue vue

<template>
  <GanttAdvancedDemo :demo="GANTT_CRITICAL_PATH_ANALYSIS_DEMO" />
</template>

<script setup lang="ts">
import GanttAdvancedDemo from './GanttAdvancedDemo.vue';
import { GANTT_CRITICAL_PATH_ANALYSIS_DEMO } from './gantt-advanced-data';
</script>

React tsx

import React from 'react';
import GanttAdvancedDemo from './GanttAdvancedReactDemo';
import { GANTT_CRITICAL_PATH_ANALYSIS_DEMO } from './gantt-advanced-data';

export default function GanttCriticalPathAnalysis() {
  return <GanttAdvancedDemo demo={GANTT_CRITICAL_PATH_ANALYSIS_DEMO} />;
}

Angular ts

import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { GanttAdvancedAngularBase } from './GanttAdvancedAngularBase';
import { GANTT_CRITICAL_PATH_ANALYSIS_DEMO } from './gantt-advanced-data';

@Component({
  selector: 'gantt-critical-path-analysis-grid',
  standalone: true,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
  imports: [RevoGrid],
  template: `<revo-grid style="min-height: 560px" [theme]="theme" [hideAttribution]="true" [plugins]="plugins" [source]="tasks" [columns]="columns" [gantt]="ganttConfig" [ganttDependencies]="dependencies" [ganttCalendars]="calendars" [ganttResources]="resources" [ganttAssignments]="assignments"></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
})
export class GanttCriticalPathAnalysisGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_CRITICAL_PATH_ANALYSIS_DEMO;
}

---

Enabling Critical Path

Set showCriticalPath: true in the visuals section of your project config:

grid.gantt = {
  visuals: {
    showCriticalPath: true,
  },
};

Critical tasks and the dependency arrows connecting them are highlighted in a distinct color (red by default).

How It Works

The scheduler computes critical path after all scheduling rules (dependencies, constraints, actuals, etc.) have been applied. It runs a backward pass over the graph to compute:

• Early Start / Early Finish: The earliest each task can begin and end.
• Late Start / Late Finish: The latest each task can begin and end without delaying the project.
• Total Slack = Late Start − Early Start.

Field	Meaning
earlyStartDate	Effective scheduled start after all rules are applied.
lateStartDate	Latest date the task can occupy without delaying the project finish.
totalSlackDays	Working-day float between early and late dates.
isCritical	true when total slack is zero.

Tip

Summary tasks are treated as critical when at least one child task is critical. Milestone tasks with no slack also appear on the critical path.

Dependency Types

All four dependency types (FS, SS, FF, SF) participate in critical path analysis. Lags (lagDays) are also factored in. A positive lag delays the successor, while a negative lag (lead time) can reduce the path length.

MSP Comparison

RevoGrid follows the Microsoft Project model: dependencies and final scheduled dates drive total slack, and tasks with zero slack become critical. Deadlines and resource leveling also influence the critical path by shifting dates or changing risk profiles.

Marking Tasks Manually

The isCritical field on a TaskEntity can pre-mark tasks for display (e.g., when loading persisted data):

grid.source = [
  {
    id: 't6',
    name: 'Frontend Development',
    isCritical: true, // pre-marked; scheduler may override this
  },
];

The scheduler will overwrite isCritical on each render cycle based on its own computation.

CSS Customization

Critical path styling uses data attributes on bar and arrow elements:

/* Critical task bar */
.gantt-bar[data-critical] {
  --gantt-bar-color: #e53e3e;
}

/* Critical dependency arrow */
.gantt-dependency[data-critical] {
  stroke: #e53e3e;
}

See the Critical path analysis demo for a live example.