Skip to content
RevoGrid [Pro]

Gantt Critical Path

The critical path is the sequence of tasks with zero total slack — any delay to these tasks directly delays the project finish date. The Gantt plugin computes the critical path automatically from your dependency graph and highlights it visually.

Source code 
---
import GanttCriticalPath from './GanttCriticalPath.vue';
---


<GanttCriticalPath client:only="vue" />

Enabling Critical Path

Section titled “Enabling Critical Path”

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

grid.gantt = {
  // …required fields
  visuals: {
    showCriticalPath: true,
  },
};

Critical tasks and the dependency arrows connecting them are immediately highlighted in a distinct colour (red by default, customisable via CSS).

How It Works

Section titled “How It Works”

The scheduler runs a forward pass followed by a backward pass over the dependency 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

A task is critical when its total slack equals zero. The critical path runs from the first task in the project to the last with no slack.

Dependency Types and the Critical Path

Section titled “Dependency Types and the Critical Path”

All four dependency types participate in critical path analysis:

TypeEffect
finish-to-startSuccessor cannot start until predecessor finishes — most common on critical paths
start-to-startSuccessor cannot start until predecessor starts
finish-to-finishSuccessor cannot finish until predecessor finishes
start-to-finishLess common; successor cannot finish until predecessor starts

Lags (lagDays) are factored into the calculation. A positive lag adds slack; a negative lag reduces it.

Marking Tasks Manually

Section titled “Marking Tasks Manually”

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

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

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

CSS Customisation

Section titled “CSS Customisation”

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;
}