Skip to content
RevoGrid [Pro]

Gantt Baselines

A baseline is a saved snapshot of task dates and progress at a specific point in time (e.g. when the project was approved). The Gantt chart can overlay these baseline bars beneath the live bars, making schedule drift immediately visible.

Source code
---
import '@revolist/gantt/styles.css';
import GanttBaseline from '@revolist/revogrid-examples/components/gantt/GanttBaseline.vue';
---


<GanttBaseline client:only="vue" />

Adding a Baseline

Section titled “Adding a Baseline”

Pass one or more BaselineSnapshot objects via grid.ganttBaselines:

grid.ganttBaselines = [
  {
    id: 'baseline-approved',
    name: 'Approved Plan',
    capturedAt: '2026-04-01T08:00:00Z',
    tasks: [
      {
        taskId: 't1',
        startDate: '2026-04-06',
        endDate: '2026-04-22',
        duration: 13,
        progressPercent: 0,
      },
      {
        taskId: 't2',
        startDate: '2026-04-06',
        endDate: '2026-04-10',
        duration: 5,
        progressPercent: 0,
      },
      {
        taskId: 't3',
        startDate: '2026-04-10',
        endDate: '2026-04-10',
        duration: 0,
        progressPercent: 0,
      },
      {
        taskId: 't4',
        startDate: '2026-04-13',
        endDate: '2026-04-22',
        duration: 8,
        progressPercent: 0,
      },
      {
        taskId: 't5',
        startDate: '2026-04-23',
        endDate: '2026-05-16',
        duration: 18,
        progressPercent: 0,
      },
      {
        taskId: 't6',
        startDate: '2026-04-23',
        endDate: '2026-05-09',
        duration: 13,
        progressPercent: 0,
      },
      {
        taskId: 't7',
        startDate: '2026-04-23',
        endDate: '2026-05-16',
        duration: 18,
        progressPercent: 0,
      },
      {
        taskId: 't8',
        startDate: '2026-05-16',
        endDate: '2026-05-16',
        duration: 0,
        progressPercent: 0,
      },
    ],
  },
];

You can also capture a snapshot from the current scheduled state:

const plugins = await grid.getPlugins();
const gantt = plugins.find(
  (plugin) => plugin.constructor?.name === 'GanttPlugin',
);
const baseline = gantt?.captureBaseline?.({
  id: 'baseline-current',
  name: 'Current Approved Plan',
  capturedAt: '2026-04-15T08:00:00Z',
});


if (baseline) {
  grid.ganttBaselines = [...(grid.ganttBaselines ?? []), baseline];
}

Enabling the Overlay

Section titled “Enabling the Overlay”

Turn on baseline rendering through the visuals key in your project config:

grid.gantt = {
  // …required fields
  visuals: {
    showBaseline: true,
    baselineId: 'baseline-approved', // optional — defaults to the latest snapshot
  },
};

When showBaseline is true, a translucent bar is drawn behind each live task bar showing its baseline position.

Multiple Baselines

Section titled “Multiple Baselines”

You can store several snapshots and switch between them at runtime:

// Initially show the approved plan
grid.gantt = {
  ...config,
  visuals: { showBaseline: true, baselineId: 'baseline-approved' },
};


// Switch to a re-baseline after scope change
grid.gantt = {
  ...config,
  visuals: { showBaseline: true, baselineId: 'baseline-replan' },
};

Variance Columns

Section titled “Variance Columns”

When a baseline is visible, each projected task row also exposes optional variance fields:

FieldDescription
startVarianceDaysCurrent scheduled start minus baseline start, in calendar days
finishVarianceDaysCurrent scheduled finish minus baseline finish, in calendar days
durationVarianceCurrent scheduled duration minus baseline duration
progressVariancePercentCurrent progress minus baseline progress, in percentage points

Add the default columns when users need to inspect drift numerically:

grid.columns = [
  createDefaultTaskTableColumn('name'),
  createDefaultTaskTableColumn('startVarianceDays'),
  createDefaultTaskTableColumn('finishVarianceDays'),
  createDefaultTaskTableColumn('durationVariance'),
  createDefaultTaskTableColumn('progressVariancePercent'),
];

BaselineSnapshot Fields

Section titled “BaselineSnapshot Fields”
FieldTypeDescription
idBaselineIdUnique identifier for this snapshot
namestringHuman-readable label (e.g. "Q1 Approved Plan")
capturedAtISODateTimeStringWhen the snapshot was taken
tasksBaselineTaskSnapshot[]Per-task date and progress records

BaselineTaskSnapshot Fields

Section titled “BaselineTaskSnapshot Fields”
FieldTypeDescription
taskIdTaskIdReferences the live task
startDateISODateStringBaseline start date
endDateISODateStringBaseline end date
durationnumberBaseline task duration
progressPercentnumberBaseline progress (0–100)