Gantt Chart for Angular

import { AuiGantt } from '@absoluteui/angular/gantt';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Gantt Chart page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { gantt: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { plainDate } from '@absoluteui/core';
import type { GanttTask, GanttTaskChangeDetail } from '@absoluteui/components/gantt';
import { AuiGantt } from '@absoluteui/angular/gantt';

@Component({
  selector: 'app-plan',
  imports: [AuiGantt],
  template: `<aui-gantt label="Plan" [tasks]="tasks" [editable]="true" scale="day" (taskChange)="changed($event)"></aui-gantt>`,
})
export class PlanComponent {
  tasks: GanttTask[] = [{ id: 'a', parentId: null, label: 'Kick-off', start: plainDate(2026, 10, 5), duration: 1 }];

  changed(detail: GanttTaskChangeDetail): void {
    this.tasks = detail.tasks;
  }
}

`<aui-gantt>`

Class AuiGantt; template reference #ref="auiGantt".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Accessible name of the tree grid; the toolbar is named ‘{label} controls’. Non-empty.
`resources`	`readonly GanttResource[]`		{ id, label, capacity? (percent per working day, default 100) }; assignments must reference them.
`calendar`	`BusinessCalendarDefinition`		Working days, holidays, and exceptions (default Monday to Friday). Durations and lags count its working days; non-working days are shaded.
`editable`	`boolean`	`false`	Pointer, keyboard, and toolbar editing (move, resize, link).
`columns`	`readonly GanttColumnKey[]`	`'['name', 'start', 'end', 'duration']'`	Grid columns: ‘name’ first, then any of ‘start’, ‘end’, ‘duration’, ‘progress’, ‘resources’, ‘float’ (unique).
`showCritical`	`boolean`	`true`	Mark critical tasks (badge, hatched bar, red connectors).
`showBaselines`	`boolean`	`true`	Draw baselines and describe baseline variance in the grid.
`showHistogram`	`boolean`	`false`	Show the resource load histogram below the chart (needs resources): daily load per resource with peak and over-capacity days as text.
`today`	`PlainDate`		Date of the today line and the Go to today button (default: the device’s local date).
`canEdit`	`(task: Readonly<GanttTask>) => boolean`		Veto edits of a task (also as a link successor). Summary and read-only tasks are never edited.
`rowHeight`	`number`	`'36'`	Row height in CSS px (24..96). Rows have a fixed height (virtual rows).
`historyLimit`	`number`	`'50'`	Undo depth (0..500).
`locale`	`string`	`'en-US'`	Dates, numbers, the first day of the week (week scale), plural forms, and messages.
`direction`	`Direction`	`'ltr'`	Mirrors the timeline and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
`[(tasks)]`	`readonly GanttTask[]`	`(tasksChange)`	Tasks: { id, parentId (summary task id or null), label, start (requested start, PlainDate), duration (working days, 0 = milestone), progress? (0..100), manual?, assignments? ({ resourceId, units? percent }), baseline? ({ start, end } inclusive), color? (1..8), readOnly?, collapsed? }. Tasks with children are summary tasks (their start and duration are ignored). Order within a parent is the array order. Validated (GANTT_OPTIONS). Replacing it clears the undo history.
`[(dependencies)]`	`readonly GanttDependency[]`	`(dependenciesChange)`	{ id, from (predecessor), to (successor), type? (‘FS’ default, ‘SS’, ‘FF’, ‘SF’), lag? (working days, negative = lead) }. Leaf tasks only, one per pair, no cycles (the error names the cycle).
`[(scale)]`	`GanttScale`	`(scaleChange)`	Timeline scale (32, 16, or 5 CSS px per day); also changed by the zoom buttons and setScale().

Outputs

Output	Payload	Description
`(taskChange)`	`GanttTaskChangeDetail`	Before a change is applied; preventDefault() keeps the previous state. Re-emits `aui-task-change`.
`(taskActivated)`	`GanttTaskActivateDetail`	Enter on a row. Re-emits `aui-task-activate`.
`(expandChange)`	`GanttExpandChangeDetail`	A summary task was expanded or collapsed. Re-emits `aui-expand-change`.

Read-only state

Property	Type	Description
`canUndo`	`Signal<boolean>`	A change can be undone.
`canRedo`	`Signal<boolean>`	An undone change can be redone.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`setScale(scale: GanttScale): void`	Change the scale, keeping the first visible date; emits aui-scale-change.
`setExpanded(id: string, expanded: boolean): void`	Expand or collapse a summary task (emits aui-expand-change).
`expandAll(): void`	Expand every summary task.
`collapseAll(): void`	Collapse every summary task.
`scrollToTask(id: string, options?: { focus?: boolean; } \| undefined): void`	Expand the ancestors, scroll the row and bar into view, and focus the row (unless focus is false).
`scrollToDate(date: PlainDate): void`	Center the timeline on a date.
`focusTask(id: string): void`	scrollToTask with focus.
`moveTask(id: string, start: PlainDate): boolean \| undefined`	Change the requested start (next working day). Emits aui-task-change; false when refused or cancelled.
`setDuration(id: string, duration: number): boolean \| undefined`	Change the duration in working days (0 = milestone).
`addDependency(dependency: GanttDependency): boolean \| undefined`	Add a dependency (validated; throws GANTT_OPTIONS for cycles or summary tasks); false when the event is cancelled.
`removeDependency(id: string): boolean \| undefined`	Remove a dependency.
`resourceLoad(range?: { start: PlainDate; end: PlainDate; } \| undefined): GanttResourceLoad[] \| undefined`	Daily load per resource (default: the timeline range).
`undo(): boolean \| undefined`	Undo the last change (emits aui-task-change with reason ‘undo’).
`redo(): boolean \| undefined`	Redo the last undone change.