Actuals and Progress

Source code

TypeScript ts

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

Vue vue

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

React tsx

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

Angular ts

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',
  remainingDurationDays: 2,
  progressPercent: 50,
}

Progress-Aware Scheduling

Enable progress-aware scheduling:

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

When enabled:

• actualStartDate anchors in-progress work.
• remainingDurationDays 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 Work

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

grid.source = [
  {
    id: 'in-progress',
    startDate: '2026-04-01',
    durationDays: 10,
    actualStartDate: '2026-04-03',
    remainingDurationDays: 2,
  },
  {
    id: 'complete',
    startDate: '2026-04-01',
    durationDays: 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.