Skip to content
RevoGrid [Pro]

Basic Gantt Chart

A Gantt chart is built from three core pieces: a project config, a list of tasks (your source), and one or more calendars. Dependencies between tasks are optional but common.

Source code
src/components/gantt/GanttBasic.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


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


const { isDark } = currentTheme();


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


const ganttConfig = {
  id: PROJECT_ID,
  name: 'Website Redesign',
  version: '1',
  currency: 'USD',
  timeZone: 'UTC',
  primaryCalendarId: CALENDAR_ID,
  updatedAt: '2026-04-06T00:00:00Z',
  zoomPreset: 'week' as const,
};


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


const tasks: TaskEntity[] = [
  {
    id: 't1', projectId: PROJECT_ID, parentId: null,
    wbsCode: '1', name: 'Design', type: 'summary',
    status: 'in-progress',
    startDate: '2026-04-06', endDate: '2026-04-24', durationDays: 15,
    progressPercent: 60, calendarId: CALENDAR_ID,
    isCritical: true, tags: [],
  },
  {
    id: 't2', projectId: PROJECT_ID, parentId: 't1',
    wbsCode: '1.1', name: 'Wireframes', type: 'task',
    status: 'done',
    startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,
    progressPercent: 100, calendarId: CALENDAR_ID,
    isCritical: true, tags: [],
  },
  {
    id: 't3', projectId: PROJECT_ID, parentId: 't1',
    wbsCode: '1.2', name: 'Design Review', type: 'milestone',
    status: 'done',
    startDate: '2026-04-10', endDate: '2026-04-10', durationDays: 0,
    progressPercent: 100, calendarId: CALENDAR_ID,
    isCritical: true, tags: ['milestone'],
  },
  {
    id: 't4', projectId: PROJECT_ID, parentId: 't1',
    wbsCode: '1.3', name: 'Visual Design', type: 'task',
    status: 'in-progress',
    startDate: '2026-04-13', endDate: '2026-04-24', durationDays: 10,
    progressPercent: 40, calendarId: CALENDAR_ID,
    isCritical: true, tags: [],
  },
  {
    id: 't5', projectId: PROJECT_ID, parentId: null,
    wbsCode: '2', name: 'Development', type: 'summary',
    status: 'not-started',
    startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18,
    progressPercent: 0, calendarId: CALENDAR_ID,
    isCritical: false, tags: [],
  },
  {
    id: 't6', projectId: PROJECT_ID, parentId: 't5',
    wbsCode: '2.1', name: 'Frontend', type: 'task',
    status: 'not-started',
    startDate: '2026-04-27', endDate: '2026-05-13', durationDays: 13,
    progressPercent: 0, calendarId: CALENDAR_ID,
    isCritical: true, tags: [],
  },
  {
    id: 't7', projectId: PROJECT_ID, parentId: 't5',
    wbsCode: '2.2', name: 'Backend', type: 'task',
    status: 'not-started',
    startDate: '2026-04-27', endDate: '2026-05-20', durationDays: 18,
    progressPercent: 0, calendarId: CALENDAR_ID,
    isCritical: false, tags: [],
  },
  {
    id: 't8', projectId: PROJECT_ID, parentId: null,
    wbsCode: '3', name: 'Launch', type: 'milestone',
    status: 'not-started',
    startDate: '2026-05-20', endDate: '2026-05-20', durationDays: 0,
    progressPercent: 0, calendarId: CALENDAR_ID,
    isCritical: true, tags: ['milestone'],
  },
];


const dependencies: DependencyEntity[] = [
  { id: 'd1', predecessorTaskId: 't2', successorTaskId: 't3', type: 'finish-to-start', lagDays: 0 },
  { id: 'd2', predecessorTaskId: 't3', successorTaskId: 't4', type: 'finish-to-start', lagDays: 1 },
  { id: 'd3', predecessorTaskId: 't4', successorTaskId: 't6', type: 'finish-to-start', lagDays: 1 },
  { id: 'd4', predecessorTaskId: 't4', successorTaskId: 't7', type: 'finish-to-start', lagDays: 1 },
  { id: 'd5', predecessorTaskId: 't6', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
  { id: 'd6', predecessorTaskId: 't7', successorTaskId: 't8', type: 'finish-to-start', lagDays: 0 },
];


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


  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  grid.plugins = [GanttPlugin];
  grid.gantt = ganttConfig;
  grid.ganttCalendars = calendars;
  grid.ganttDependencies = dependencies;
  grid.source = tasks;
  grid.columns = [
    createDefaultTaskTableColumn('wbs'),
    createDefaultTaskTableColumn('name'),
    createDefaultTaskTableColumn('startDate'),
    createDefaultTaskTableColumn('endDate'),
    createDefaultTaskTableColumn('duration'),
    createDefaultTaskTableColumn('percentDone'),
  ];


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

Setup

Section titled “Setup”

  1. Install the enterprise package

    Terminal window
    npm install @revolist/revogrid-enterprise

  2. Import the plugin

    import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/revogrid-enterprise';

  3. Configure the project

    The gantt property on the grid element accepts a GanttPluginConfig describing the project:

    grid.gantt = {
      id: 'project-website',
      name: 'Website Redesign',
      version: '1',
      currency: 'USD',
      timeZone: 'UTC',
      primaryCalendarId: 'cal-standard',
      updatedAt: '2026-04-06T00:00:00Z',
      zoomPreset: 'week',
    };

  4. Supply tasks as the data source

    Tasks map to rows. Set them via grid.source. Use parentId: null for root tasks and a task’s id for children:

    grid.source = [
      {
        id: 't1', parentId: null, wbsCode: '1',
        name: 'Design', type: 'summary',
        status: 'in-progress',
        startDate: '2026-04-06', endDate: '2026-04-24', durationDays: 15,
        progressPercent: 60, calendarId: 'cal-standard',
        isCritical: false, tags: [],
      },
      {
        id: 't2', parentId: 't1', wbsCode: '1.1',
        name: 'Wireframes', type: 'task',
        status: 'done',
        startDate: '2026-04-06', endDate: '2026-04-10', durationDays: 5,
        progressPercent: 100, calendarId: 'cal-standard',
        isCritical: false, tags: [],
      },
      // …more tasks
    ];

  5. Add a calendar

    grid.ganttCalendars = [{
      id: 'cal-standard',
      name: 'Standard',
      timeZone: 'UTC',
      workingDays: [1, 2, 3, 4, 5], // Mon–Fri
      holidays: [],
      hoursPerDay: 8,
    }];

  6. Add dependencies (optional)

    grid.ganttDependencies = [{
      id: 'd1',
      predecessorTaskId: 't2',
      successorTaskId: 't3',
      type: 'finish-to-start',
      lagDays: 0,
    }];

  7. Define table columns

    grid.columns = [
      createDefaultTaskTableColumn('wbs'),
      createDefaultTaskTableColumn('name'),
      createDefaultTaskTableColumn('startDate'),
      createDefaultTaskTableColumn('endDate'),
      createDefaultTaskTableColumn('duration'),
      createDefaultTaskTableColumn('percentDone'),
    ];

Task Types

Section titled “Task Types”
TypeDescription
'task'Regular work item — has its own startDate, endDate, durationDays
'summary'Parent task — dates roll up from children automatically
'milestone'Zero-duration marker — durationDays: 0, startDate === endDate

Dependency Types

Section titled “Dependency Types”
TypeMeaning
finish-to-startSuccessor starts after predecessor finishes (most common)
start-to-startBoth tasks start at the same time
finish-to-finishBoth tasks finish at the same time
start-to-finishSuccessor finishes when predecessor starts

Use lagDays to add a buffer (positive) or overlap (negative) between linked tasks.