Skip to content
RevoGrid [Pro]

JavaScript Gantt Chart

Source code
src/components/gantt/gantt-showcase/GanttShowcase.ts
import '@revolist/ui/styles.scss';
import { createControl } from '@revolist/ui';
import './gantt-showcase.scss';
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import { GanttPlugin } from '@revolist/gantt';
import { ExportExcelPlugin, RowStatusPlugin } from '@revolist/revogrid-pro';
import {
  STANDARD_CALENDAR,
  SHOWCASE_ASSIGNMENTS,
  SHOWCASE_BASELINES,
  SHOWCASE_COLUMNS_WITH_COMPLETION,
  SHOWCASE_DEFAULT_HIDDEN,
  SHOWCASE_DEPENDENCIES,
  SHOWCASE_GANTT_CONFIG,
  SHOWCASE_RESOURCES,
  SHOWCASE_TASKS,
  renderShowcaseTaskBarColor,
  renderShowcaseTaskBarContent,
} from '../shared/gantt-project-data';
import { currentTheme } from '../../composables/useRandomData';


// ─── Entry point ──────────────────────────────────────────────────────────────


export function load(parentSelector: string): void {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;
  const darkTheme = currentTheme().isDark();


  const container = document.createElement('div');
  container.className = `gantt-showcase-shell grow h-full ${darkTheme ? 'gantt-showcase-shell--dark' : 'gantt-showcase-shell--light'}`;
  parent.appendChild(container);


  const grid = document.createElement('revo-grid') as HTMLRevoGridElement;
  const controls = document.createElement('div');
  controls.className = 'gantt-showcase-controls';
  container.appendChild(controls);


  grid.theme = darkTheme ? 'darkCompact' : 'compact';
  grid.readonly = false;
  grid.range = true;
  grid.resize = true;
  grid.rowSize = 42;
  grid.rowHeaders = false;
  grid.hideAttribution = true;
  grid.autoSizeColumn = false;
  grid.classList.add('gantt-showcase-grid');
  grid.plugins = [GanttPlugin, ExportExcelPlugin, RowStatusPlugin];
  grid.hideColumns = [...SHOWCASE_DEFAULT_HIDDEN];
  grid.columns = [...SHOWCASE_COLUMNS_WITH_COMPLETION];
  grid.source = [...SHOWCASE_TASKS];
  grid.ganttDependencies = [...SHOWCASE_DEPENDENCIES];
  grid.ganttCalendars = [{ ...STANDARD_CALENDAR }];
  grid.ganttResources = [...SHOWCASE_RESOURCES];
  grid.ganttAssignments = [...SHOWCASE_ASSIGNMENTS];
  grid.ganttBaselines = [...SHOWCASE_BASELINES];
  let showCriticalPath = Boolean(
    SHOWCASE_GANTT_CONFIG.visuals.showCriticalPath,
  );
  let showBaseline = false;


  function applyGanttConfig() {
    grid.gantt = {
      ...SHOWCASE_GANTT_CONFIG,
      visuals: {
        ...SHOWCASE_GANTT_CONFIG.visuals,
        showCriticalPath,
        showBaseline,
        taskBarColorHook: renderShowcaseTaskBarColor,
        taskBarContentHook: renderShowcaseTaskBarContent,
      },
    } as typeof grid.gantt;
  }


  function createToggle(
    label: string,
    checked: () => boolean,
    onChange: (value: boolean) => void,
  ) {
    const control = createControl(document, 'button', { class: 'rv-btn-sm' });
    control.textContent = label;
    const sync = () => {
      control.setAttribute('aria-pressed', String(checked()));
      control.classList.toggle('rv-btn-primary', checked());
    };
    control.addEventListener('click', () => {
      onChange(!checked());
      applyGanttConfig();
      sync();
    });
    sync();
    return control;
  }


  controls.append(
    createToggle(
      'Critical path',
      () => showCriticalPath,
      (value) => {
        showCriticalPath = value;
      },
    ),
    createToggle(
      'Baselines',
      () => showBaseline,
      (value) => {
        showBaseline = value;
      },
    ),
  );


  applyGanttConfig();
  container.appendChild(grid);
}

Vanilla TypeScript

Create a revo-grid element and configure Gantt through public element properties. Start with TypeScript

Vue 3

Use @revolist/vue3-datagrid with reactive project collections. Start with Vue

How Gantt Fits Together

Section titled “How Gantt Fits Together”
tasks + calendars + dependencies + resources + assignments
                         │
                         ▼
              deterministic scheduler
                         │
                         ▼
          projected task rows + timeline geometry
                         │
                         ▼
          RevoGrid rendering and interaction surface

Your application owns project data and persistence. GanttPlugin validates and schedules that data, projects it into task-table rows and timeline geometry, and routes supported edits back through Gantt mutation services. RevoGrid owns virtualization, columns, selection, keyboard navigation, and the browser rendering lifecycle.

What You Can Build

Section titled “What You Can Build”
  • Work breakdown structures with tasks, summaries, and milestones.
  • Automatic or manual schedules using calendars, dependencies, constraints, and deadlines.
  • Resource assignments, capacity analysis, effort modes, and leveling.
  • Baseline comparison, progress tracking, slack, and critical-path analysis.
  • Editable timelines with drag, resize, progress, dependency, task-editor, and context-menu workflows.
  • JSON and Microsoft Project interchange plus grid, Excel, and print-oriented export workflows.

Use the AI Assistant to read permitted scheduled fields and approve scoped task updates through native Gantt APIs.

Section titled “Recommended Path”
  1. Complete Installation and one framework quick start.
  2. Follow the project tutorial to add dependencies, resources, editing, baselines, and export.
  3. Learn the data model and scheduling model.
  4. Explore the searchable Gantt examples.
  5. Use the Gantt API reference for exact signatures.