@masterteam/gantt

Original, dependency-light enterprise Gantt chart for Angular 21. It includes a headless scheduling engine, virtualized tree-grid/timeline rendering, editing, dependencies, resources, exports, theming, i18n/RTL, accessibility-oriented keyboard flows, and summary task rollups.

This is not a Syncfusion wrapper. The package has no Syncfusion runtime dependency; xlsx is the only third-party runtime dependency used for Excel export.

Quick Start

import { Component } from "@angular/core";
import { Gantt, type GanttConfig } from "@masterteam/gantt";

@Component({
  selector: "app-plan",
  standalone: true,
  imports: [Gantt],
  template: `<mt-gantt [data]="tasks" [config]="config" />`,
})
export class PlanComponent {
  readonly tasks = [
    { id: 1, name: "Design", start: "2026-07-06", duration: 5, progress: 60 },
    {
      id: 2,
      name: "Build",
      start: "2026-07-13",
      duration: 10,
      dependency: "1FS",
    },
  ];

  readonly config: GanttConfig = {
    taskFields: {
      id: "id",
      name: "name",
      startDate: "start",
      duration: "duration",
      progress: "progress",
      dependency: "dependency",
    },
  };
}

Give the host element a real height. The component fills its container:

<section style="height: 640px">
  <mt-gantt [data]="tasks" [config]="config" />
</section>

Defaults

When config.columns is omitted, the grid uses a WBS-first project-plan default:

1. WBS
2. Task Name
3. Start
4. Finish
5. Duration
6. Progress

Task Name remains the tree/expander column by default. If a host supplies a WBS-first custom column set, keep the same behavior with treeColumnIndex: 1.

Summary Formulas

readonly config: GanttConfig = {
  taskFields,
  summaryFormula: {
    mode: 'auto',
    durationMode: 'working-span',
    progressMode: 'duration-weighted',
    baselineMode: 'child-extents',
    rollUpWork: true,
    costField: 'cost',
    customFields: {
      risk: {
        aggregator: 'worstStatus',
        statusOrder: ['low', 'medium', 'high'],
      },
    },
  },
};

The visual editor is exported as GanttSummaryFormulaEditor for host workbench or drawer UIs. Use [showActions]="false" for live-edit experiences where changes apply immediately through two-way [(config)].

i18n And RTL

Built-in English strings are embedded. Hosts can register asset dictionaries from the package:

import ar from "@masterteam/gantt/assets/i18n/ar.json";

Then pass locale, translations, and rtl through GanttConfig:

readonly config: GanttConfig = {
  taskFields,
  locale: 'ar',
  rtl: true,
  translations: ar,
};

Styling

Runtime styling is bundled with the Angular components. The package also ships @masterteam/gantt/assets/gantt.css as an optional asset for hosts that keep a central package-asset import list.

Documentation

Full documentation lives in docs/gantt/. The showcase routes under /gantt/* are the source of truth for usage patterns and demos.