Actuals and Progress

Source code

TypeScriptts

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

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

Vuevue

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

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

Reacttsx

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

export default function GanttProgressWork() {
  return <GanttAdvancedDemo demo={GANTT_PROGRESS_WORK_DEMO} />;
}

Angularts

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

@Component({
  selector: 'gantt-progress-work-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 GanttProgressWorkGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_PROGRESS_WORK_DEMO;
}

Use actual fields to reflect progress:

{
  id: 'qa',
  name: 'QA',
  actualStartDate: '2026-04-08',
  remainingDuration: 2,
  percentDone: 50,
}

Calculated Status and Status Date

Set gantt.statusDate to the reporting date used by the read-only Status and Status Indicator columns. It defaults to today’s ISO date when omitted and affects reporting only; it does not move tasks or timeline lines.

grid.gantt = {
  ...project,
  statusDate: '2026-04-08',
};

The calculated values are:

• Complete when % Done is 100 or Actual Finish exists.
• Future Task when the scheduled start is after the Status Date.
• On Schedule when linearly distributed reported completion covers the effective planned work through the day before the Status Date.
• Late when work has started or should have progressed but reported completion does not reach that boundary.

The comparison uses the effective task calendar, holidays, split ranges, and elapsed-duration rules. Incomplete milestones are Late before the Status Date, On Schedule on it, and Future Task after it. Summary tasks use rolled-up dates and progress. Because Gantt stores aggregate % Done rather than timephased actual work, completion is distributed linearly over the effective scheduled work span.

Use the editable Workflow Status field for not-started, in-progress, done, or blocked. Workflow Status never drives calculated Status or scheduling.

Percent Done column mode

The managed % Done column uses the Pro progress renderers and defaults to a horizontal bar. Choose the project default with gantt.visuals.percentDoneMode:

grid.gantt = {
  ...project,
  visuals: {
    percentDoneMode: 'circle',
  },
};

Override that default for an individual authored column with its mode property:

grid.columns = [
  { prop: 'name', name: 'Task' },
  { prop: 'percentDone', name: '% Done', mode: 'number' },
];

Mode	Cell display
number	Percentage text such as 40%.
bar	Horizontal progress bar plus percentage. This is the default.
circle	Circular progress indicator with the percentage centered inside.

The column mode takes precedence over visuals.percentDoneMode. Both change presentation only. Values remain numbers from 0 through 100; sorting, filtering, editing, scheduling, task-bar progress, and Excel export continue to use percentDone. A custom cellTemplate supplied on the % Done grid column overrides either managed mode.

Progress-Aware Scheduling

Enable progress-aware scheduling:

grid.gantt = {
  scheduling: {
    progressRescheduling: 'remaining-duration',
  },
};

When enabled:

• actualStartDate anchors in-progress work.
• remainingDuration replaces the planned duration for the remaining span.
• actualFinishDate pins completed work to the recorded finish.
• The schedule origin is shown as Actual.

Example: Actuals and Remaining Duration

grid.gantt = {
  scheduling: { progressRescheduling: 'remaining-duration' },
};

grid.source = [
  {
    id: 'in-progress',
    startDate: '2026-04-01',
    duration: 10,
    actualStartDate: '2026-04-03',
    remainingDuration: 2,
  },
  {
    id: 'complete',
    startDate: '2026-04-01',
    duration: 10,
    actualStartDate: '2026-04-02',
    actualFinishDate: '2026-04-04',
  },
];

Expected result: in-progress is anchored on 2026-04-03 and schedules 2 remaining days. complete is pinned to its actual dates.