TimelineKit

Features

Critical Path

The Critical Path Method (CPM) identifies the longest sequence of dependent tasks that determines the minimum project duration. Tasks on the critical path are highlighted — any delay to them delays the entire project.

// Enable critical path display
gantt.showCriticalPath = true;

// Access CPM-computed values on each task
const task = gantt.list.getTaskById('1');
task.isCritical;    // true if on critical path
task.earlyStart;    // earliest possible start date
task.earlyFinish;   // earliest possible finish date
task.lateStart;     // latest start without delaying project
task.lateFinish;    // latest finish without delaying project
task.totalFloat;    // total slack in hours (0 = critical)
task.freeFloat;     // free slack in hours

Baseline Comparison

Save a snapshot of the current schedule as a baseline, then visually compare planned vs. actual progress.

// Save current schedule as baseline
gantt.saveBaseline();

// Show/hide baseline overlay
gantt.showBaseline = true;

// Check if baseline exists
gantt.hasBaseline; // true

// Access baseline dates on individual tasks
const task = gantt.list.getTaskById('1');
task.baselineStartTime;
task.baselineEndTime;

// Clear baseline
gantt.clearBaseline();

Export

Export the Gantt chart to multiple formats. PDF and Excel require optional dependencies.

// Export to PNG image
const imageBlob = await gantt.exportToImage();

// Export to CSV
const csv = gantt.exportToCsv({
  delimiter: ',',
  includeHeaders: true,
  columns: ['name', 'start', 'end', 'progress'],
  includeLinks: true,
});

// Export to PDF (requires jspdf)
const pdfBlob = await gantt.exportToPdf();

// Export to Excel (requires exceljs)
const xlsxBlob = await gantt.exportToExcel({
  sheetName: 'Project Plan',
  includeLinksSheet: true,
  includeResourcesSheet: true,
  includeFormatting: true,
});

Serialization

Save and restore the entire chart state as JSON.

// Save to JSON string
const json = gantt.save();
localStorage.setItem('project', json);

// Load from JSON string
const saved = localStorage.getItem('project');
gantt.load(saved);

The JSON includes tasks (with hierarchy), links, resources, and resource assignments.