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

1
---
2
import GanttBaseline from './GanttBaseline.vue';
3
---
4

5
<GanttBaseline client:only="vue" />

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
defineCustomElements();
3

4
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/revogrid-enterprise';
5
import type { TaskEntity, DependencyEntity, CalendarEntity, BaselineSnapshot } from '@revolist/revogrid-enterprise';
6
import { currentTheme } from '../composables/useRandomData';
7

8
const { isDark } = currentTheme();
9

10
const PROJECT_ID = 'project-web-redesign';
11
const CALENDAR_ID = 'cal-standard';
12

13
const ganttConfig = {
14
  id: PROJECT_ID,
15
  name: 'Website Redesign',
16
  version: '1',
17
  currency: 'USD',
18
  timeZone: 'UTC',
19
  primaryCalendarId: CALENDAR_ID,
20
  updatedAt: '2026-04-06T00:00:00Z',
21
  zoomPreset: 'week' as const,
22
  visuals: {
23
    showBaseline: true,
24
    baselineId: 'baseline-approved',
25
  },
26
};
27

28
const calendars: CalendarEntity[] = [
29
  {
30
    id: CALENDAR_ID, name: 'Standard', timeZone: 'UTC',
31
    workingDays: [1, 2, 3, 4, 5], holidays: [], hoursPerDay: 8,
32
  },
33
];
34

35
// Current (live) tasks — note Design slipped by 3 days vs baseline
36
const tasks: TaskEntity[] = [
37
  {
38
    id: 't1', projectId: PROJECT_ID, parentId: null,
39
    wbsCode: '1', name: 'Design', type: 'summary',
40
    status: 'in-progress',
41
    startDate: '2026-04-06', endDate: '2026-04-27', durationDays: 18,
42
    progressPercent: 50, calendarId: CALENDAR_ID, isCritical: true, tags: [],
43
  },
44
  {
45
    id: 't2', projectId: PROJECT_ID, parentId: 't1',
46
    wbsCode: '1.1', name: 'Wireframes', type: 'task',
47
    status: 'done',
48
    startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,
49
    progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: [],
50
  },
51
  {
52
    id: 't3', projectId: PROJECT_ID, parentId: 't1',
53
    wbsCode: '1.2', name: 'Design Review', type: 'milestone',
54
    status: 'done',
55
    startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,
56
    progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
57
  },
58
  {
59
    id: 't4', projectId: PROJECT_ID, parentId: 't1',
60
    wbsCode: '1.3', name: 'Visual Design', type: 'task',
61
    status: 'in-progress',
62
    startDate: '2026-04-13', endDate: '2026-04-27', durationDays: 13, // slipped from 10 → 13
63
    progressPercent: 30, calendarId: CALENDAR_ID, isCritical: true, tags: [],
64
  },
65
  {
66
    id: 't5', projectId: PROJECT_ID, parentId: null,
67
    wbsCode: '2', name: 'Development', type: 'summary',
68
    status: 'not-started',
69
    startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
70
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
71
  },
72
  {
73
    id: 't6', projectId: PROJECT_ID, parentId: 't5',
74
    wbsCode: '2.1', name: 'Frontend', type: 'task',
75
    status: 'not-started',
76
    startDate: '2026-04-28', endDate: '2026-05-14', durationDays: 13,
77
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: [],
78
  },
79
  {
80
    id: 't7', projectId: PROJECT_ID, parentId: 't5',
81
    wbsCode: '2.2', name: 'Backend', type: 'task',
82
    status: 'not-started',
83
    startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
84
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
85
  },
86
  {
87
    id: 't8', projectId: PROJECT_ID, parentId: null,
88
    wbsCode: '3', name: 'Launch', type: 'milestone',
89
    status: 'not-started',
90
    startDate: '2026-05-21', endDate: '2026-05-21', durationDays: 0,
91
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
92
  },
93
];
94

95
const dependencies: DependencyEntity[] = [
96
  { id: 'd1', predecessorTaskId: 't2', successorTaskId: 't3', type: 'finish-to-start', lagDays: 0 },
97
  { id: 'd2', predecessorTaskId: 't3', successorTaskId: 't4', type: 'finish-to-start', lagDays: 1 },
98
  { id: 'd3', predecessorTaskId: 't4', successorTaskId: 't6', type: 'finish-to-start', lagDays: 1 },
99
  { id: 'd4', predecessorTaskId: 't4', successorTaskId: 't7', type: 'finish-to-start', lagDays: 1 },
100
  { id: 'd5', predecessorTaskId: 't6', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
101
  { id: 'd6', predecessorTaskId: 't7', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
102
];
103

104
// Baseline — the original approved plan before Visual Design slipped
105
const baselines: BaselineSnapshot[] = [
106
  {
107
    id: 'baseline-approved',
108
    name: 'Approved Plan',
109
    capturedAt: '2026-04-01T08:00:00Z',
110
    tasks: [
111
      { taskId: 't1', startDate: '2026-04-06', endDate: '2026-04-24', durationDays: 15, progressPercent: 0 },
112
      { taskId: 't2', startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,  progressPercent: 0 },
113
      { taskId: 't3', startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,  progressPercent: 0 },
114
      { taskId: 't4', startDate: '2026-04-13', endDate: '2026-04-24', durationDays: 10, progressPercent: 0 },
115
      { taskId: 't5', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
116
      { taskId: 't6', startDate: '2026-04-27', endDate: '2026-05-13', durationDays: 13, progressPercent: 0 },
117
      { taskId: 't7', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
118
      { taskId: 't8', startDate: '2026-05-20', endDate: '2026-05-20', durationDays: 0,  progressPercent: 0 },
119
    ],
120
  },
121
];
122

123
export function load(parentSelector: string) {
124
  const grid = document.createElement('revo-grid');
125

126
  grid.theme = isDark() ? 'darkCompact' : 'compact';
127
  grid.hideAttribution = true;
128
  grid.plugins = [GanttPlugin];
129
  grid.gantt = ganttConfig;
130
  grid.ganttCalendars = calendars;
131
  grid.ganttDependencies = dependencies;
132
  grid.ganttBaselines = baselines;
133
  grid.source = tasks;
134
  grid.columns = [
135
    createDefaultTaskTableColumn('wbs'),
136
    createDefaultTaskTableColumn('name'),
137
    createDefaultTaskTableColumn('startDate'),
138
    createDefaultTaskTableColumn('endDate'),
139
    createDefaultTaskTableColumn('duration'),
140
    createDefaultTaskTableColumn('percentDone'),
141
  ];
142

143
  document.querySelector(parentSelector)?.appendChild(grid);
144
}

1
<template>
2
  <RevoGrid
3
    hide-attribution
4
    style="height: 500px"
5
    :theme="isDark ? 'darkCompact' : 'compact'"
6
    :plugins="plugins"
7
    :source="tasks"
8
    :columns="columns"
9
    :gantt.prop="ganttConfig"
10
    :gantt-dependencies.prop="dependencies"
11
    :gantt-calendars.prop="calendars"
12
    :gantt-baselines.prop="baselines"
13
  />
14
</template>
15

16
<script setup lang="ts">
17
import { ref } from 'vue';
18
import RevoGrid from '@revolist/vue3-datagrid';
19
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/revogrid-enterprise';
20
import type { TaskEntity, DependencyEntity, CalendarEntity, BaselineSnapshot } from '@revolist/revogrid-enterprise';
21
import { currentThemeVue } from '../composables/useRandomData';
22

23
const { isDark } = currentThemeVue();
24

25
const PROJECT_ID = 'project-web-redesign';
26
const CALENDAR_ID = 'cal-standard';
27

28
const plugins = ref([GanttPlugin]);
29

30
const ganttConfig = ref({
31
  id: PROJECT_ID,
32
  name: 'Website Redesign',
33
  version: '1',
34
  currency: 'USD',
35
  timeZone: 'UTC',
36
  primaryCalendarId: CALENDAR_ID,
37
  updatedAt: '2026-04-06T00:00:00Z',
38
  zoomPreset: 'week' as const,
39
  visuals: {
40
    showBaseline: true,
41
    baselineId: 'baseline-approved',
42
  },
43
});
44

45
const calendars = ref<CalendarEntity[]>([
46
  {
47
    id: CALENDAR_ID, name: 'Standard', timeZone: 'UTC',
48
    workingDays: [1, 2, 3, 4, 5], holidays: [], hoursPerDay: 8,
49
  },
50
]);
51

52
const tasks = ref<TaskEntity[]>([
53
  {
54
    id: 't1', projectId: PROJECT_ID, parentId: null,
55
    wbsCode: '1', name: 'Design', type: 'summary',
56
    status: 'in-progress',
57
    startDate: '2026-04-06', endDate: '2026-04-27', durationDays: 18,
58
    progressPercent: 50, calendarId: CALENDAR_ID, isCritical: true, tags: [],
59
  },
60
  {
61
    id: 't2', projectId: PROJECT_ID, parentId: 't1',
62
    wbsCode: '1.1', name: 'Wireframes', type: 'task',
63
    status: 'done',
64
    startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,
65
    progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: [],
66
  },
67
  {
68
    id: 't3', projectId: PROJECT_ID, parentId: 't1',
69
    wbsCode: '1.2', name: 'Design Review', type: 'milestone',
70
    status: 'done',
71
    startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,
72
    progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
73
  },
74
  {
75
    id: 't4', projectId: PROJECT_ID, parentId: 't1',
76
    wbsCode: '1.3', name: 'Visual Design', type: 'task',
77
    status: 'in-progress',
78
    startDate: '2026-04-13', endDate: '2026-04-27', durationDays: 13,
79
    progressPercent: 30, calendarId: CALENDAR_ID, isCritical: true, tags: [],
80
  },
81
  {
82
    id: 't5', projectId: PROJECT_ID, parentId: null,
83
    wbsCode: '2', name: 'Development', type: 'summary',
84
    status: 'not-started',
85
    startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
86
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
87
  },
88
  {
89
    id: 't6', projectId: PROJECT_ID, parentId: 't5',
90
    wbsCode: '2.1', name: 'Frontend', type: 'task',
91
    status: 'not-started',
92
    startDate: '2026-04-28', endDate: '2026-05-14', durationDays: 13,
93
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: [],
94
  },
95
  {
96
    id: 't7', projectId: PROJECT_ID, parentId: 't5',
97
    wbsCode: '2.2', name: 'Backend', type: 'task',
98
    status: 'not-started',
99
    startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
100
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
101
  },
102
  {
103
    id: 't8', projectId: PROJECT_ID, parentId: null,
104
    wbsCode: '3', name: 'Launch', type: 'milestone',
105
    status: 'not-started',
106
    startDate: '2026-05-21', endDate: '2026-05-21', durationDays: 0,
107
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
108
  },
109
]);
110

111
const dependencies = ref<DependencyEntity[]>([
112
  { id: 'd1', predecessorTaskId: 't2', successorTaskId: 't3', type: 'finish-to-start', lagDays: 0 },
113
  { id: 'd2', predecessorTaskId: 't3', successorTaskId: 't4', type: 'finish-to-start', lagDays: 1 },
114
  { id: 'd3', predecessorTaskId: 't4', successorTaskId: 't6', type: 'finish-to-start', lagDays: 1 },
115
  { id: 'd4', predecessorTaskId: 't4', successorTaskId: 't7', type: 'finish-to-start', lagDays: 1 },
116
  { id: 'd5', predecessorTaskId: 't6', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
117
  { id: 'd6', predecessorTaskId: 't7', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
118
]);
119

120
const baselines = ref<BaselineSnapshot[]>([
121
  {
122
    id: 'baseline-approved',
123
    name: 'Approved Plan',
124
    capturedAt: '2026-04-01T08:00:00Z',
125
    tasks: [
126
      { taskId: 't1', startDate: '2026-04-06', endDate: '2026-04-24', durationDays: 15, progressPercent: 0 },
127
      { taskId: 't2', startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,  progressPercent: 0 },
128
      { taskId: 't3', startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,  progressPercent: 0 },
129
      { taskId: 't4', startDate: '2026-04-13', endDate: '2026-04-24', durationDays: 10, progressPercent: 0 },
130
      { taskId: 't5', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
131
      { taskId: 't6', startDate: '2026-04-27', endDate: '2026-05-13', durationDays: 13, progressPercent: 0 },
132
      { taskId: 't7', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
133
      { taskId: 't8', startDate: '2026-05-20', endDate: '2026-05-20', durationDays: 0,  progressPercent: 0 },
134
    ],
135
  },
136
]);
137

138
const columns = ref([
139
  createDefaultTaskTableColumn('wbs'),
140
  createDefaultTaskTableColumn('name'),
141
  createDefaultTaskTableColumn('startDate'),
142
  createDefaultTaskTableColumn('endDate'),
143
  createDefaultTaskTableColumn('duration'),
144
  createDefaultTaskTableColumn('percentDone'),
145
]);
146
</script>

1
import React, { useMemo } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/revogrid-enterprise';
4
import type { TaskEntity, DependencyEntity, CalendarEntity, BaselineSnapshot } from '@revolist/revogrid-enterprise';
5
import { currentTheme } from '../composables/useRandomData';
6

7
const { isDark } = currentTheme();
8

9
const PROJECT_ID = 'project-web-redesign';
10
const CALENDAR_ID = 'cal-standard';
11

12
const tasks: TaskEntity[] = [
13
  {
14
    id: 't1', projectId: PROJECT_ID, parentId: null,
15
    wbsCode: '1', name: 'Design', type: 'summary', status: 'in-progress',
16
    startDate: '2026-04-06', endDate: '2026-04-27', durationDays: 18,
17
    progressPercent: 50, calendarId: CALENDAR_ID, isCritical: true, tags: [],
18
  },
19
  {
20
    id: 't2', projectId: PROJECT_ID, parentId: 't1',
21
    wbsCode: '1.1', name: 'Wireframes', type: 'task', status: 'done',
22
    startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,
23
    progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: [],
24
  },
25
  {
26
    id: 't3', projectId: PROJECT_ID, parentId: 't1',
27
    wbsCode: '1.2', name: 'Design Review', type: 'milestone', status: 'done',
28
    startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,
29
    progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
30
  },
31
  {
32
    id: 't4', projectId: PROJECT_ID, parentId: 't1',
33
    wbsCode: '1.3', name: 'Visual Design', type: 'task', status: 'in-progress',
34
    startDate: '2026-04-13', endDate: '2026-04-27', durationDays: 13, // slipped
35
    progressPercent: 30, calendarId: CALENDAR_ID, isCritical: true, tags: [],
36
  },
37
  {
38
    id: 't5', projectId: PROJECT_ID, parentId: null,
39
    wbsCode: '2', name: 'Development', type: 'summary', status: 'not-started',
40
    startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
41
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
42
  },
43
  {
44
    id: 't6', projectId: PROJECT_ID, parentId: 't5',
45
    wbsCode: '2.1', name: 'Frontend', type: 'task', status: 'not-started',
46
    startDate: '2026-04-28', endDate: '2026-05-14', durationDays: 13,
47
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: [],
48
  },
49
  {
50
    id: 't7', projectId: PROJECT_ID, parentId: 't5',
51
    wbsCode: '2.2', name: 'Backend', type: 'task', status: 'not-started',
52
    startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
53
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
54
  },
55
  {
56
    id: 't8', projectId: PROJECT_ID, parentId: null,
57
    wbsCode: '3', name: 'Launch', type: 'milestone', status: 'not-started',
58
    startDate: '2026-05-21', endDate: '2026-05-21', durationDays: 0,
59
    progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
60
  },
61
];
62

63
const dependencies: DependencyEntity[] = [
64
  { id: 'd1', predecessorTaskId: 't2', successorTaskId: 't3', type: 'finish-to-start', lagDays: 0 },
65
  { id: 'd2', predecessorTaskId: 't3', successorTaskId: 't4', type: 'finish-to-start', lagDays: 1 },
66
  { id: 'd3', predecessorTaskId: 't4', successorTaskId: 't6', type: 'finish-to-start', lagDays: 1 },
67
  { id: 'd4', predecessorTaskId: 't4', successorTaskId: 't7', type: 'finish-to-start', lagDays: 1 },
68
  { id: 'd5', predecessorTaskId: 't6', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
69
  { id: 'd6', predecessorTaskId: 't7', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
70
];
71

72
const calendars: CalendarEntity[] = [
73
  { id: CALENDAR_ID, name: 'Standard', timeZone: 'UTC', workingDays: [1, 2, 3, 4, 5], holidays: [], hoursPerDay: 8 },
74
];
75

76
const baselines: BaselineSnapshot[] = [
77
  {
78
    id: 'baseline-approved',
79
    name: 'Approved Plan',
80
    capturedAt: '2026-04-01T08:00:00Z',
81
    tasks: [
82
      { taskId: 't1', startDate: '2026-04-06', endDate: '2026-04-24', durationDays: 15, progressPercent: 0 },
83
      { taskId: 't2', startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,  progressPercent: 0 },
84
      { taskId: 't3', startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,  progressPercent: 0 },
85
      { taskId: 't4', startDate: '2026-04-13', endDate: '2026-04-24', durationDays: 10, progressPercent: 0 },
86
      { taskId: 't5', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
87
      { taskId: 't6', startDate: '2026-04-27', endDate: '2026-05-13', durationDays: 13, progressPercent: 0 },
88
      { taskId: 't7', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
89
      { taskId: 't8', startDate: '2026-05-20', endDate: '2026-05-20', durationDays: 0,  progressPercent: 0 },
90
    ],
91
  },
92
];
93

94
function GanttBaseline() {
95
  const ganttConfig = useMemo(() => ({
96
    id: PROJECT_ID,
97
    name: 'Website Redesign',
98
    version: '1',
99
    currency: 'USD',
100
    timeZone: 'UTC',
101
    primaryCalendarId: CALENDAR_ID,
102
    updatedAt: '2026-04-06T00:00:00Z',
103
    zoomPreset: 'week' as const,
104
    visuals: { showBaseline: true, baselineId: 'baseline-approved' },
105
  }), []);
106

107
  const columns = useMemo(() => [
108
    createDefaultTaskTableColumn('wbs'),
109
    createDefaultTaskTableColumn('name'),
110
    createDefaultTaskTableColumn('startDate'),
111
    createDefaultTaskTableColumn('endDate'),
112
    createDefaultTaskTableColumn('duration'),
113
    createDefaultTaskTableColumn('percentDone'),
114
  ], []);
115

116
  return (
117
    <RevoGrid
118
      style={{ height: '500px' }}
119
      theme={isDark() ? 'darkCompact' : 'compact'}
120
      hideAttribution
121
      plugins={[GanttPlugin]}
122
      source={tasks}
123
      columns={columns}
124
      gantt={ganttConfig}
125
      ganttDependencies={dependencies}
126
      ganttCalendars={calendars}
127
      ganttBaselines={baselines}
128
    />
129
  );
130
}
131

132
export default GanttBaseline;

1
import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/revogrid-enterprise';
4
import type { TaskEntity, DependencyEntity, CalendarEntity, BaselineSnapshot } from '@revolist/revogrid-enterprise';
5
import { currentTheme } from '../composables/useRandomData';
6

7
const PROJECT_ID = 'project-web-redesign';
8
const CALENDAR_ID = 'cal-standard';
9

10
@Component({
11
  selector: 'gantt-baseline',
12
  standalone: true,
13
  schemas: [NO_ERRORS_SCHEMA],
14
  imports: [RevoGrid],
15
  template: `
16
    <revo-grid
17
      style="height: 500px"
18
      [theme]="theme"
19
      [hideAttribution]="true"
20
      [plugins]="plugins"
21
      [source]="tasks"
22
      [columns]="columns"
23
      [gantt]="ganttConfig"
24
      [ganttDependencies]="dependencies"
25
      [ganttCalendars]="calendars"
26
      [ganttBaselines]="baselines"
27
    ></revo-grid>
28
  `,
29
  encapsulation: ViewEncapsulation.None,
30
})
31
export class GanttBaselineComponent {
32
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
33
  plugins = [GanttPlugin];
34

35
  ganttConfig = {
36
    id: PROJECT_ID,
37
    name: 'Website Redesign',
38
    version: '1',
39
    currency: 'USD',
40
    timeZone: 'UTC',
41
    primaryCalendarId: CALENDAR_ID,
42
    updatedAt: '2026-04-06T00:00:00Z',
43
    zoomPreset: 'week' as const,
44
    visuals: { showBaseline: true, baselineId: 'baseline-approved' },
45
  };
46

47
  calendars: CalendarEntity[] = [
48
    { id: CALENDAR_ID, name: 'Standard', timeZone: 'UTC', workingDays: [1, 2, 3, 4, 5], holidays: [], hoursPerDay: 8 },
49
  ];
50

51
  tasks: TaskEntity[] = [
52
    {
53
      id: 't1', projectId: PROJECT_ID, parentId: null,
54
      wbsCode: '1', name: 'Design', type: 'summary', status: 'in-progress',
55
      startDate: '2026-04-06', endDate: '2026-04-27', durationDays: 18,
56
      progressPercent: 50, calendarId: CALENDAR_ID, isCritical: true, tags: [],
57
    },
58
    {
59
      id: 't2', projectId: PROJECT_ID, parentId: 't1',
60
      wbsCode: '1.1', name: 'Wireframes', type: 'task', status: 'done',
61
      startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,
62
      progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: [],
63
    },
64
    {
65
      id: 't3', projectId: PROJECT_ID, parentId: 't1',
66
      wbsCode: '1.2', name: 'Design Review', type: 'milestone', status: 'done',
67
      startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,
68
      progressPercent: 100, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
69
    },
70
    {
71
      id: 't4', projectId: PROJECT_ID, parentId: 't1',
72
      wbsCode: '1.3', name: 'Visual Design', type: 'task', status: 'in-progress',
73
      startDate: '2026-04-13', endDate: '2026-04-27', durationDays: 13,
74
      progressPercent: 30, calendarId: CALENDAR_ID, isCritical: true, tags: [],
75
    },
76
    {
77
      id: 't5', projectId: PROJECT_ID, parentId: null,
78
      wbsCode: '2', name: 'Development', type: 'summary', status: 'not-started',
79
      startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
80
      progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
81
    },
82
    {
83
      id: 't6', projectId: PROJECT_ID, parentId: 't5',
84
      wbsCode: '2.1', name: 'Frontend', type: 'task', status: 'not-started',
85
      startDate: '2026-04-28', endDate: '2026-05-14', durationDays: 13,
86
      progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: [],
87
    },
88
    {
89
      id: 't7', projectId: PROJECT_ID, parentId: 't5',
90
      wbsCode: '2.2', name: 'Backend', type: 'task', status: 'not-started',
91
      startDate: '2026-04-28', endDate: '2026-05-21', durationDays: 18,
92
      progressPercent: 0, calendarId: CALENDAR_ID, isCritical: false, tags: [],
93
    },
94
    {
95
      id: 't8', projectId: PROJECT_ID, parentId: null,
96
      wbsCode: '3', name: 'Launch', type: 'milestone', status: 'not-started',
97
      startDate: '2026-05-21', endDate: '2026-05-21', durationDays: 0,
98
      progressPercent: 0, calendarId: CALENDAR_ID, isCritical: true, tags: ['milestone'],
99
    },
100
  ];
101

102
  dependencies: DependencyEntity[] = [
103
    { id: 'd1', predecessorTaskId: 't2', successorTaskId: 't3', type: 'finish-to-start', lagDays: 0 },
104
    { id: 'd2', predecessorTaskId: 't3', successorTaskId: 't4', type: 'finish-to-start', lagDays: 1 },
105
    { id: 'd3', predecessorTaskId: 't4', successorTaskId: 't6', type: 'finish-to-start', lagDays: 1 },
106
    { id: 'd4', predecessorTaskId: 't4', successorTaskId: 't7', type: 'finish-to-start', lagDays: 1 },
107
    { id: 'd5', predecessorTaskId: 't6', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
108
    { id: 'd6', predecessorTaskId: 't7', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
109
  ];
110

111
  baselines: BaselineSnapshot[] = [
112
    {
113
      id: 'baseline-approved',
114
      name: 'Approved Plan',
115
      capturedAt: '2026-04-01T08:00:00Z',
116
      tasks: [
117
        { taskId: 't1', startDate: '2026-04-06', endDate: '2026-04-24', durationDays: 15, progressPercent: 0 },
118
        { taskId: 't2', startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,  progressPercent: 0 },
119
        { taskId: 't3', startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,  progressPercent: 0 },
120
        { taskId: 't4', startDate: '2026-04-13', endDate: '2026-04-24', durationDays: 10, progressPercent: 0 },
121
        { taskId: 't5', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
122
        { taskId: 't6', startDate: '2026-04-27', endDate: '2026-05-13', durationDays: 13, progressPercent: 0 },
123
        { taskId: 't7', startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18, progressPercent: 0 },
124
        { taskId: 't8', startDate: '2026-05-20', endDate: '2026-05-20', durationDays: 0,  progressPercent: 0 },
125
      ],
126
    },
127
  ];
128

129
  columns = [
130
    createDefaultTaskTableColumn('wbs'),
131
    createDefaultTaskTableColumn('name'),
132
    createDefaultTaskTableColumn('startDate'),
133
    createDefaultTaskTableColumn('endDate'),
134
    createDefaultTaskTableColumn('duration'),
135
    createDefaultTaskTableColumn('percentDone'),
136
  ];
137
}

Adding a Baseline

Pass one or more BaselineSnapshot objects via grid.ganttBaselines:

1
grid.ganttBaselines = [
2
  {
3
    id: 'baseline-approved',
4
    name: 'Approved Plan',
5
    capturedAt: '2026-04-01T08:00:00Z',
6
    tasks: [
7
      { taskId: 't1', startDate: '2026-04-06', endDate: '2026-04-22', durationDays: 13, progressPercent: 0 },
8
      { taskId: 't2', startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,  progressPercent: 0 },
9
      { taskId: 't3', startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,  progressPercent: 0 },
10
      { taskId: 't4', startDate: '2026-04-13', endDate: '2026-04-22', durationDays: 8,  progressPercent: 0 },
11
      { taskId: 't5', startDate: '2026-04-23', endDate: '2026-05-16', durationDays: 18, progressPercent: 0 },
12
      { taskId: 't6', startDate: '2026-04-23', endDate: '2026-05-09', durationDays: 13, progressPercent: 0 },
13
      { taskId: 't7', startDate: '2026-04-23', endDate: '2026-05-16', durationDays: 18, progressPercent: 0 },
14
      { taskId: 't8', startDate: '2026-05-16', endDate: '2026-05-16', durationDays: 0,  progressPercent: 0 },
15
    ],
16
  },
17
];

Enabling the Overlay

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

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

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

Multiple Baselines

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

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

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

BaselineSnapshot Fields

Field	Type	Description
`id`	`BaselineId`	Unique identifier for this snapshot
`name`	`string`	Human-readable label (e.g. `"Q1 Approved Plan"`)
`capturedAt`	`ISODateTimeString`	When the snapshot was taken
`tasks`	`BaselineTaskSnapshot[]`	Per-task date and progress records

BaselineTaskSnapshot Fields

Field	Type	Description
`taskId`	`TaskId`	References the live task
`startDate`	`ISODateString`	Baseline start date
`endDate`	`ISODateString`	Baseline end date
`durationDays`	`number`	Baseline duration in calendar days
`progressPercent`	`number`	Baseline progress (0–100)