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.

Critical State Is Projected

Do not set isCritical in grid.source. Gantt source rows describe authored task data, while isCritical, slack fields, early/late dates, and critical dependency styling are projected by the scheduler on each render.

If an application needs to persist critical-path state, persist the scheduling inputs instead: tasks, dependencies, constraints, calendars, assignments, and scheduling options. RevoGrid will recompute the critical path from those inputs.

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.