GanttCraft Documentation

import { GanttChart } from 'ganttcraft';
import type { GanttTask } from 'ganttcraft';

const tasks: GanttTask[] = [
  {
    id: 'task-1',
    name: 'Project Alpha',
    start: new Date('2026-05-01T00:00:00Z'),
    end: new Date('2026-05-15T00:00:00Z'),
    progress: 50,
  },
  {
    id: 'task-2',
    name: 'Design Phase',
    start: new Date('2026-05-01T00:00:00Z'),
    end: new Date('2026-05-05T00:00:00Z'),
    progress: 100,
    parentId: 'task-1', // Creates a hierarchy
  }
];

export default function MyGanttApp() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GanttChart tasks={tasks} viewMode="day" />
    </div>
  );
}

import { GanttChart, StandardCalendar } from 'ganttcraft';

<GanttChart 
  tasks={tasks} 
  calendar={StandardCalendar} 
/>

<GanttChart tasks={tasks} showCriticalPath />

<GanttChart tasks={tasks} showResourcePanel />

import { HistoryManager } from 'ganttcraft';

// Initialize with an empty history or initial state
const history = new HistoryManager();

// After a task update:
history.pushState(newTasks);

// To Undo:
if (history.canUndo()) {
  const previousTasks = history.undo();
  setTasks(previousTasks);
}

// To Redo:
if (history.canRedo()) {
  const nextTasks = history.redo();
  setTasks(nextTasks);
}

const myPlugin = {
  name: 'my-custom-plugin',
  beforeUpdateTask: (task) => {
    // Return false to prevent an update
    if (task.start < new Date()) return false; 
    return true;
  },
  renderTaskOverlay: (task) => (
    task.isOverdue ? <div className="text-red-500">!</div> : null
  )
};

<GanttChart tasks={tasks} plugins={[myPlugin]} />

import { GanttChart, locales } from 'ganttcraft';

// Use a built-in locale
<GanttChart tasks={tasks} i18n={locales.fr} />

// Or override specific keys
const myI18n = {
  locale: fr,
  strings: {
    taskName: 'Nom de la tâche',
    startDate: 'Date de début',
    endDate: 'Date de fin',
    progress: 'Avancement',
    editTask: 'Modifier la tâche',
    deleteTask: 'Supprimer la tâche',
  }
};

<GanttChart tasks={tasks} i18n={myI18n} />

<GanttChart
  tasks={tasks}
  autoSchedule
  onTasksChange={(updated) => setTasks(updated)}
/>

// Programmatic API via context
import { useGanttContext } from 'ganttcraft';

const { addDependency, deleteTask } = useGanttContext();
addDependency('task-1', 'task-2'); // Creates FS dependency
deleteTask('task-3');              // Removes task + all its dependency refs

import { exportPNG, inlineCSSCustomProperties, flattenForeignObjects } from 'ganttcraft';

// Simple usage
const svgEl = document.querySelector('.gantt-svg') as SVGSVGElement;
await exportPNG(svgEl, 'my-project.png');

// Advanced: override token colours in the export
const clone = svgEl.cloneNode(true) as SVGSVGElement;
flattenForeignObjects(clone);
inlineCSSCustomProperties(clone, { '--gantt-task-fill': '#1d4ed8' });
// ... then serialise clone to canvas manually