An MIT-licensed Gantt chart for every stack.

import { Gantt, Dataset } from 'freegantt';

const dataset = new Dataset({
  timeZone: 'America/Chicago',
  entries: [
    { id: 't1', name: 'Design', start: '2026-09-01', end: '2026-09-07' },
    { id: 't2', name: 'Build',  start: '2026-09-08', end: '2026-09-21' },
    { id: 't3', name: 'QA',     start: '2026-09-22', end: '2026-09-28' },
  ],
});

const gantt = new Gantt({ container: '#gantt', dataset });

// Edits are plain calls. The chart redraws on the next frame.
dataset.entries.update('t2', { end: '2026-09-24' });
dataset.undo();

import { Gantt, tooltips, contextMenu, definePlugin } from 'freegantt';

// Paint a stripe behind every row that is running late.
const highlightLate = definePlugin({
  id: 'app.highlightLate',
  view(ctx) {
    ctx.view.registerDecoration('underBars', ({ rows }) =>
      rows
        .filter((row) => isLate(row.entryIds[0]))
        .map((row) => ({ kind: 'rowStripe', rowId: row.id, class: 'late' })),
    );
  },
});

new Gantt({
  container,
  dataset,
  plugins: [tooltips(), contextMenu(), highlightLate],
});