# Syncfusion Angular Gantt Chart > Implement and configure the Syncfusion Angular Gantt Chart component (ejs-gantt, GanttModule). Use this when building Angular applications with Gantt chart functionality, task scheduling, dependencies, or resource management. Covers component setup, task dependencies, taskbar editing, critical path analysis, resource allocation, timeline configuration, filtering, sorting, export, undo/redo, state persistence, and localization. - Skill: `syncfusion/syncfusion-angular-gantt-chart` (Agent Skill, multi-file: 28 files) - Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-angular-gantt-chart` - Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-angular-gantt-chart/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: syncfusion (https://skillmd.com/u/syncfusion) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/syncfusion/syncfusion-angular-gantt-chart --- # Syncfusion Angular Gantt Chart A comprehensive skill for implementing and configuring the Syncfusion Angular Gantt Chart component (`ejs-gantt`). This covers everything from initial setup through advanced features like critical path, virtual scrolling, resource views, undo/redo, state persistence, localization, and export. ## When to Use This Skill Use this skill when you need to: - Install and set up the Angular Gantt Chart component - Bind local or remote data to the Gantt chart - Configure task scheduling modes (Auto/Manual/Custom) - Define task dependencies and predecessor relationships - Add, edit, or delete tasks (cell, dialog, taskbar editing) - Assign and manage resources - Configure timelines, zooming, and tier formats - Customize taskbars, labels, and data markers - Filter, sort, search, or select rows/cells - Enable toolbar, context menu, or undo/redo - Export to Excel or PDF - Implement virtual scrolling or state persistence - Apply localization, RTL layout, or timezone configuration - Work with holidays, event markers, critical path, or baseline --- ## Documentation and Navigation Guide ### Getting Started πŸ“„ **Read:** [references/getting-started.md](references/getting-started.md) - Installation via `ng add @syncfusion/ej2-angular-gantt` - CSS imports for all themes (material3, bootstrap5, fluent2, tailwind3) - Setting up Angular standalone component with `imports` and `providers` - Binding data with `dataSource` and `taskFields` β€” self-referential vs hierarchical - Injecting feature services (EditService, FilterService, ToolbarService, etc.) - Configuring timeline, toolbar, editing, filtering, sorting - `gridLines` values: `'Both'` | `'Horizontal'` | `'Vertical'` | `'None'` - `actionFailure` error handling for common configuration mistakes ### Data Binding πŸ“„ **Read:** [references/data-binding.md](references/data-binding.md) - **Default pattern:** Self-referential flat array with `id` + `parentID` (idMapping + parentIdMapping) β€” use this unless user explicitly asks for nested data - Hierarchical local data with `child` array β€” only when user explicitly requests nested/tree structure - Decision table: when to use self-referential vs hierarchical - Remote data binding with `DataManager` and adaptors (ODataV4, WebApiAdaptor, UrlAdaptor) - Load-on-demand (virtual loading) with `loadChildOnDemand` and `hasChildMapping` - Observable / RxJS data binding with `async` pipe - Remote CRUD with `crudUrl`, `insertUrl`, `updateUrl`, `removeUrl`, `batchUrl` - Common gotchas table (missing `isPrimaryKey`, wrong adaptor, parent date issues) ### Observable CRUD Operations πŸ“„ **Read:** [references/observable-crud.md](references/observable-crud.md) - Handle add, edit, delete operations with Observable data binding via `dataSourceChanged` event - Service extends `BehaviorSubject` for proper Observable binding - Extract task data correctly: use `(args.data as any).taskData` for edit operations - Always call `args.endEdit()` after CRUD operation completes to notify Gantt - Single vs multiple record deletion: check `args.data.length` - Emit updated data via `super.next()` / `this.next()` to refresh UI - Handle errors gracefully and ensure endEdit() is called even on failure ### Task Scheduling πŸ“„ **Read:** [references/task-scheduling.md](references/task-scheduling.md) - `taskMode`: `'Auto'` (default), `'Manual'`, `'Custom'` (per-task via boolean field) - Auto mode: dates calculated from dependencies, working time, and holidays - Manual mode: all dates fixed as-is in data source; use `validateManualTasksOnLinking` to still adjust on link - Custom mode: per-task scheduling via mapped boolean field in data source - Unscheduled tasks (`allowUnscheduledTasks`) β€” partial dates, floating bars - `durationUnit`: `'Day'` | `'Hour'` | `'Minute'` - **Working days:** `workWeek` array (default Mon–Fri); `includeWeekend: true` makes all 7 days working - **Working hours:** `dayWorkingTime` β€” array of `{ from, to }` ranges (default 8–17); affects hour-based durations - Baseline dates (`renderBaseline`, `baselineStartDate`, `baselineEndDate`, `baselineDuration`, `baselineColor`) and `baselineTemplate` for custom baseline rendering - Work scheduling (effort-driven) with `work` field and `workUnit` ### Task Dependencies πŸ“„ **Read:** [references/task-dependencies.md](references/task-dependencies.md) - Dependency types: `FS` (Finish-to-Start), `SS`, `FF`, `SF` β€” format: `'2FS'`, `'3SS+1d'` - Comma-separated multiple predecessors: `'2FS,3SS'` - Predecessor lag/lead offsets with `d`/`h`/`m` units - `autoUpdatePredecessorOffset` β€” sync offset values with actual positions on load - `allowParentDependency` β€” enable parent-child and cross-hierarchy dependencies - Editing via connector line drag when `editSettings.allowTaskbarEditing: true` - `actionBegin` `requestType: 'validateLinkedTask'` β€” handle dependency conflicts - Programmatic: `addPredecessor()`, `removePredecessor()`, `updateRecordById()` - `connectorLineWidth` and `connectorLineBackground` for connector styling ### Task Constraints πŸ“„ **Read:** [references/task-constraints.md](references/task-constraints.md) - 8 constraint types: ASAP (0), ALAP (1), MSO (2), MFO (3), SNET (4), SNLT (5), FNET (6), FNLT (7) - Map via `taskFields.constraintType` (numeric) and `taskFields.constraintDate` (Date) - Constraints enforced only in Auto mode; stored-but-passive in Manual mode - Conflicts with dependencies surface in `actionBegin` event ### Managing Tasks πŸ“„ **Read:** [references/managing-tasks.md](references/managing-tasks.md) - `editSettings`: `allowEditing`, `allowAdding`, `allowDeleting`, `allowTaskbarEditing`, `mode` (`'Auto'` | `'Dialog'`) - Cell editing with `editType` per column: `'numericedit'`, `'defaultedit'`, `'dropdownedit'`, `'booleanedit'`, `'datepickeredit'` - Dialog editing with custom tab configuration (`addDialogFields`, `editDialogFields`) - Programmatic: `addRecord()`, `updateRecordById()`, `deleteRecord()`, `openAddDialog()`, `openEditDialog(id)` - Expand/collapse: `expandAll()`, `collapseAll()`, `expandByID(id)`, `collapseByID(id)`; events: `expanding`, `expanded`, `collapsing`, `collapsed` - Validation via `actionBegin` event (`args.cancel = true` to block) - Server CRUD via `actionComplete` + `requestType` inspection - Indent / outdent hierarchy changes via toolbar or `indent()` / `outdent()` methods ### Splitting and Merging Tasks πŸ“„ **Read:** [references/splitting-and-merging.md](references/splitting-and-merging.md) - `taskFields.segments` for hierarchical data; `taskFields.segmentId` for self-referential data - Split at load time or dynamically via dialog Segments tab or context menu `SplitTask` - Merge via context menu `MergeTask` or by dragging segments together - `onTaskbarClick` with `segmentIndex` to detect which segment was clicked - Limitations: no splits on parent/milestone tasks; incompatible with multi-taskbar resource view ### Resources πŸ“„ **Read:** [references/resources.md](references/resources.md) - `resources` (data) + `resourceFields` (field mapping: `id`, `name`, `unit`, `group`) - `taskFields.resourceInfo` to link resources to tasks - Resource view mode (`viewType: 'ResourceView'`) with row-per-resource display - `showOverAllocationAsMultiTaskbar` β€” stacked taskbars for over-allocated resources - `allowTaskbarOverlap` β€” controls overlapping vs stacked taskbars in resource rows (and affects same-resource dependency rendering) - Work-based scheduling: `work` field, `taskType` (`'FixedWork'`, `'FixedDuration'`, `'FixedUnit'`) - Work unit: `workUnit: 'Hour'` | `'Day'` | `'Minute'` ### Columns πŸ“„ **Read:** [references/columns.md](references/columns.md) - Column `field`, `headerText`, `width`, `format`, `type`, `template`, `headerTemplate` - Column reordering (`allowReordering`), resizing (`allowResizing`) - Frozen columns (`freeze: 'Left'` | `'Right'`) β€” requires `FreezeService` - Column spanning via `queryCellInfo` - `treeColumnIndex` for tree expand/collapse column - WBS (Work Breakdown Structure) column with `columnType: 'WBS'` - Column menu (`showColumnMenu`) β€” sort, filter, auto-fit, column chooser - `isPrimaryKey` requirement for CRUD operations ### Timeline πŸ“„ **Read:** [references/timeline.md](references/timeline.md) - `timelineSettings` configuration - Top tier and bottom tier customization - Timeline view modes (day/week/month/year) - Formatter function with `(date, format, tier, mode)` parameters - Timeline cell width (`timelineUnitSize`) - Custom date formats - `projectStartDate` and `projectEndDate` - Timeline view window (`viewStartDate` / `viewEndDate`) - Week start day (`weekStartDay`) - Automatic timescale update (`updateTimescaleView`) - Infinite timeline scrolling (`enableInfiniteTimelineScroll`) - Weekend highlighting (`timelineSettings.showWeekend`) - Timeline cells tooltip (`showTooltip`) - `timelineTemplate` β€” custom HTML in tier header cells (via `` using `data.date`, `data.value`, `data.tier`) - Navigate timeline (`previousTimeSpan()` / `nextTimeSpan()`) - Zooming in and out ### Taskbar πŸ“„ **Read:** [references/taskbar.md](references/taskbar.md) - `taskbarTemplate`, `parentTaskbarTemplate`, `milestoneTemplate` β€” full custom templates - `labelSettings`: `leftLabel`, `rightLabel`, `taskLabel` (field names or templates) - `queryTaskbarInfo` β€” dynamic styling: `taskbarBgColor`, `progressBarBgColor`, `taskbarBorderColor` - `indicators` / data markers on individual tasks: `date`, `iconClass`, `label`, `tooltip` - Tooltip customization via `tooltipSettings.taskbar` template - `taskbarHeight`, `taskbarCornerRadius`, `allowTaskbarDragAndDrop` ### Filtering and Searching πŸ“„ **Read:** [references/filtering-and-searching.md](references/filtering-and-searching.md) - `allowFiltering: true` + `FilterService` β€” menu and Excel filter types - `filterSettings.type`: `'Menu'` (default) | `'Excel'` - `filterSettings.hierarchyMode`: `'Parent'` | `'Child'` | `'Both'` | `'None'` - Initial filter on load via `filterSettings.columns` array - Searching: `allowSearching: true` + `'Search'` in toolbar - `searchSettings`: `fields`, `operator`, `ignoreCase` - Programmatic: `filterByColumn()`, `clearFiltering()`, `search()` ### Sorting πŸ“„ **Read:** [references/sorting.md](references/sorting.md) - `allowSorting: true` + `SortService` β€” click column headers to sort - Disable per column: `{ field: 'TaskID', allowSorting: false }` - Multi-column sort: Ctrl+click additional headers; Shift+click to remove - Initial sort on load via `sortSettings.columns` array - Programmatic: `sortColumn()`, `removeSortColumn()`, `clearSorting()` ### Rows πŸ“„ **Read:** [references/rows.md](references/rows.md) - `rowDataBound` / `queryCellInfo` β€” dynamic row/cell styling - `rowHeight` β€” uniform row height in pixels (must exceed `taskbarHeight`) - `rowSpan` via `queryCellInfo` β€” vertical cell spanning - `allowRowDragAndDrop` β€” drag rows to reorder/reparent; `rowDrop` events - `indent()` / `outdent()` β€” change hierarchy level for the selected row - `autoFocusTasks` β€” focus the matching taskbar when a row is selected ### Selection πŸ“„ **Read:** [references/selection.md](references/selection.md) - `allowSelection: true` + `SelectionService` β€” required for any selection feature - `selectionSettings.mode`: `'Row'` (default) | `'Cell'` | `'Both'` - `selectionSettings.type`: `'Single'` (default) | `'Multiple'` (Ctrl+click for multi-select) - `selectionSettings.enableToggle` β€” click to deselect already-selected row - Cell selection modes: `'Flow'` | `'Box'` | `'BoxWithBorder'` - Programmatic: `selectRow()`, `selectRows()`, `selectCell()`, `clearSelection()`, `getSelectedRecords()` ### Scrolling πŸ“„ **Read:** [references/scrolling.md](references/scrolling.md) - `enableVirtualization: true` + `VirtualScrollService` β€” DOM virtualization for large datasets - `enableTimelineVirtualization` β€” virtualize timeline columns independently - Splitter: `splitterSettings.position` (percentage string or pixel value), `columnIndex`, `view` (`'Default'` | `'Grid'` | `'Chart'`) - Programmatic: `scrollToDate('04/02/2024')`, `scrollToTaskbar(taskId)` - Virtual scroll limitations: row/column templates, grouping, and some aggregate features not supported ### Toolbar πŸ“„ **Read:** [references/toolbar.md](references/toolbar.md) - `ToolbarService` required; set `toolbar` as string array or mixed `ItemModel` array - Built-in items: `'Add'`, `'Edit'`, `'Delete'`, `'Update'`, `'Cancel'`, `'ExpandAll'`, `'CollapseAll'`, `'Search'`, `'Indent'`, `'Outdent'`, `'ZoomIn'`, `'ZoomOut'`, `'ZoomToFit'`, `'ExcelExport'`, `'CsvExport'`, `'PdfExport'`, `'CriticalPath'`, `'Undo'`, `'Redo'`, `'SplitTask'`, `'MergeTask'`, `'ColumnChooser'` - Custom items via `ItemModel`: `text`, `id`, `prefixIcon`, `align`, `tooltipText` - `{ type: 'Separator' }` for visual dividers - `toolbarClick` event β€” use `args.item.id` to identify clicked item (format: `'{ganttId}_{itemId}'`) - Enable/disable programmatically: `enableToolbarItems()` / `disableToolbarItems()` ### Programmatic Methods πŸ“„ **Read:** [references/gantt-methods.md](references/gantt-methods.md) - Column utilities: `autoFitColumns()` - Edit control: `cancelEdit()`, `openAddDialog()`, `openEditDialog()` - Task management: `deleteRecord()`, `convertToMilestone()`, `changeTaskMode()`, `updateRecordByID()`, `updateRecordByIndex()`, `updateTaskId()`, `updateDataSource()`, `updateProjectDates()` - Toolbar control: `enableItems()` - Expand/Collapse: `expandByIndex()`, `expandByID()`, `collapseByIndex()`, `collapseByID()` - Undo/Redo stacks: `clearUndoCollection()`, `clearRedoCollection()`, `getUndoActions()`, `getRedoActions()` - Data retrieval: `getCurrentViewData()`, `getRecordByID()`, `getTaskByUniqueID()`, `getTaskInfo()`, `getTaskbarHeight()`, `getExpandedRecords()`, `getGanttColumns()`, `getGridColumns()` - Formatting helpers: `getDurationString()`, `getWorkString()` - DOM access: `getRowByID()`, `getRowByIndex()` - Sorting: `removeSortColumn()` - Selection: `selectCells()` - Row reorder: `reorderRows()` - Scrolling: `scrollToTask()`, `updateChartScrollOffset()` ### Events πŸ“„ **Read:** [references/events.md](references/events.md) - Lifecycle: `load`, `created`, `dataBound`, `destroyed` - Edit lifecycle: `actionBegin` (cancel with `args.cancel = true`), `actionComplete`, `actionFailure` - Taskbar: `taskbarEditing`, `taskbarEdited`, `onTaskbarClick`, `queryTaskbarInfo` - Row/cell: `rowDataBound`, `queryCellInfo`, `rowSelected`, `rowDeselected`, `cellSelected` - Expand/collapse: `expanding`, `expanded`, `collapsing`, `collapsed` - Export: `beforeExcelExport`, `excelExportComplete`, `beforePdfExport`, `pdfExportComplete`, `pdfQueryTaskbarInfo` - `recordDoubleClick` β€” open custom edit on double click ### Context Menu πŸ“„ **Read:** [references/context-menu.md](references/context-menu.md) - `enableContextMenu: true` + `ContextMenuService` β€” right-click on rows or header - Default items include: `'AutoFitAll'`, `'AutoFit'`, `'SortAscending'`, `'SortDescending'`, `'Add'`, `'Edit'`, `'Delete'`, `'Save'`, `'Cancel'`, `'Indent'`, `'Outdent'`, `'TaskInformation'`, `'SplitTask'`, `'MergeTask'` - Custom items via `ContextMenuItemModel`: `text`, `id`, `iconCss`, `target` (row/header) - `contextMenuOpen` β€” dynamically hide/show items per row - `contextMenuClick` β€” handle item selection ### Holidays and Event Markers πŸ“„ **Read:** [references/holidays-and-markers.md](references/holidays-and-markers.md) - `DayMarkersService` required for both holidays and event markers - `holidays`: array of `{ from, to?, label, cssClass }` β€” non-working days that extend task durations - `eventMarkers`: array of `{ day, label, cssClass, top? }` β€” full-height vertical lines at specific dates - Custom styling per type via `cssClass` + CSS targeting `.e-gantt-event-marker` / `.e-span-label` - `top` property staggers overlapping markers at the same date ### Critical Path πŸ“„ **Read:** [references/critical-path.md](references/critical-path.md) - `enableCriticalPath: true` + `CriticalPathService` β€” highlights zero/negative-slack tasks in red - `'CriticalPath'` toolbar item β€” user toggle button - `getCriticalTasks()` β€” returns array of `IGanttData` objects with `slack` value - `queryTaskbarInfo` + `ganttProperties.isCritical` β€” conditional per-task coloring - CSS overrides: `.e-critical-path-container`, `.e-critical-connector-line` - Rules: completed tasks (100%) excluded; parent/child criticality independent; auto-recalculates on any change ### Export (Excel and PDF) πŸ“„ **Read:** [references/export.md](references/export.md) - Excel: `allowExcelExport: true` + `ExcelExportService`; call `excelExport()` / `csvExport()` - PDF: `allowPdfExport: true` + `PdfExportService`; call `pdfExport()` - `ExcelExportProperties`: `fileName`, `dataSource`, `includeHiddenColumn`, `header`, `footer` - `PdfExportProperties`: `fileName`, `pageOrientation`, `pageSize`, `fitToWidthSettings`, `ganttStyle`, `theme` - PDF header/footer content types: `Text`, `Line`, `PageNumber`, `Image` - Single-page export: `fitToWidthSettings.isFitToWidth: true` - Blob export: `pdfExport({}, true)` β†’ blob available in `pdfExportComplete` event - Multi-Gantt export to one PDF via chained `pdfExport()` with `multipleExport` - `pdfQueryTaskbarInfo` β€” per-taskbar colors in PDF output ### Undo / Redo πŸ“„ **Read:** [references/undo-redo.md](references/undo-redo.md) - `enableUndoRedo: true` + `UndoRedoService` β€” up to 10 steps by default - `undoRedoActions` array β€” choose which action types are tracked (18 supported actions) - `undoRedoStepsCount` β€” configure history depth - Keyboard: `Ctrl+Z` / `Ctrl+Y`; programmatic: `undo()` / `redo()` - `'Undo'` / `'Redo'` toolbar items auto-disable when history is exhausted ### State Persistence πŸ“„ **Read:** [references/state-persistence.md](references/state-persistence.md) - `enablePersistence: true` β€” saves filter/sort/column state to `localStorage` under key `'{id}gantt'` - Requires unique `id` on `` element - Reset methods: `clearStorage()`, remove localStorage key manually, or set new `id` - Immutable mode (`enableImmutableMode`) β€” only re-renders changed rows for large-dataset performance - Loading animation: `loadingIndicator.indicatorType` β€” `'Spinner'` (default) | `'Shimmer'` - Manual spinner: `showSpinner()` / `hideSpinner()` ### Localization, RTL and Formatting πŸ“„ **Read:** [references/localization-rtl.md](references/localization-rtl.md) - `locale` property + `setCulture()` + `L10n.load()` β€” translate all Gantt UI strings - Full locale key reference for the `'gantt'` namespace - RTL: `[enableRtl]="true"` + `locale="ar"` β€” reverses layout direction - `timezone` β€” IANA timezone string (e.g. `'America/New_York'`, `'UTC'`) for consistent cross-region dates - Column date formatting: `format` string or `{ type: 'date', skeleton: 'yMd' }` - Column number formatting: `'N2'`, `'C2'`, `'P1'` etc. --- ## Quick Start Example ```typescript import { Component } from '@angular/core'; import { GanttModule, EditService, SortService, FilterService, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt'; @Component({ imports: [GanttModule], standalone: true, providers: [EditService, SortService, FilterService, ToolbarService, SelectionService], selector: 'app-root', template: ` ` }) export class AppComponent { // Default: self-referential data (flat array with id + parentID) // Use hierarchical (child array) only if user explicitly requests it public data: object[] = [ { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2024'), Duration: 5, Progress: 0, ParentID: null }, { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 }, { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 }, { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1, Predecessor: '3FS' } ]; public taskFields: object = { id: 'TaskID', // idMapping name: 'TaskName', startDate: 'StartDate', duration: 'Duration', progress: 'Progress', dependency: 'Predecessor', parentID: 'ParentID' // parentIdMapping β€” null = root task }; public toolbar: string[] = ['Add', 'Edit', 'Delete', 'ExpandAll', 'CollapseAll', 'Search']; public editSettings: object = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true }; } ``` --- ## Common Patterns ### When user needs task editing β†’ Set `editSettings.allowEditing: true`, inject `EditService` β†’ Use `mode: 'Auto'` for cell editing, `mode: 'Dialog'` for dialog ### When user needs large dataset performance β†’ Read `references/scrolling.md` β€” enable `enableVirtualization: true` + `VirtualScrollService` ### When user needs to export data β†’ Read `references/export.md` β€” inject `ExcelExportService` or `PdfExportService` ### When user needs resource management β†’ Read `references/resources.md` β€” configure `resources` + `resourceFields` ### When user needs undo/redo β†’ Read `references/undo-redo.md` β€” inject `UndoRedoService`, set `enableUndoRedo: true` ### When user needs localization or RTL β†’ Read `references/localization-rtl.md` β€” call `L10n.load()` before bootstrap, set `locale` and `enableRtl` ### When user needs state persistence β†’ Read `references/state-persistence.md` β€” set `enablePersistence: true` and unique `id` ### When user needs split/segment tasks β†’ Read `references/splitting-and-merging.md` β€” map `taskFields.segments`, inject `EditService` --- ## Key Module Injections | Feature | Service to Inject | |---------|------------------| | Editing (add/edit/delete/taskbar drag) | `EditService` | | Filtering | `FilterService` | | Sorting | `SortService` | | Toolbar | `ToolbarService` | | Selection | `SelectionService` | | Day Markers / Holidays / Event Markers | `DayMarkersService` | | Critical Path | `CriticalPathService` | | Excel / CSV Export | `ExcelExportService` | | PDF Export | `PdfExportService` | | Undo / Redo | `UndoRedoService` | | Column Menu | `ColumnMenuService` | | Context Menu | `ContextMenuService` | | Virtual Scrolling | `VirtualScrollService` | | Row Drag and Drop | `RowDDService` | | Column Reordering | `ReorderService` | | Frozen Columns | `FreezeService` | | Column Resizing | `ResizeService` | --- ## Key Props Reference | Property | Type | Default | Description | |---|---|---|---| | `dataSource` | `object[]` \| `DataManager` | `[]` | Task data β€” self-referential (flat) or hierarchical | | `taskFields` | `TaskFieldsModel` | β€” | Maps data fields to Gantt task properties | | `height` | `string` \| `number` | `'auto'` | Component height (e.g. `'450px'`) | | `taskMode` | `string` | `'Auto'` | Scheduling mode: `'Auto'` \| `'Manual'` \| `'Custom'` | | `editSettings` | `EditSettingsModel` | β€” | Enable add/edit/delete/taskbar editing and edit mode | | `toolbar` | `string[]` \| `ItemModel[]` | β€” | Toolbar buttons β€” requires `ToolbarService` | | `allowFiltering` | `boolean` | `false` | Enable column filter menus β€” requires `FilterService` | | `filterSettings` | `FilterSettingsModel` | β€” | `type`, `hierarchyMode`, `columns` (initial filters) | | `allowSorting` | `boolean` | `false` | Enable column sorting β€” requires `SortService` | | `sortSettings` | `SortSettingsModel` | β€” | `columns` array for initial sort on load | | `allowSelection` | `boolean` | `true` | Enable row/cell selection β€” requires `SelectionService` | | `selectionSettings` | `SelectionSettingsModel` | β€” | `mode`, `type`, `enableToggle`, `cellSelectionMode` | | `enableCriticalPath` | `boolean` | `false` | Highlight critical path β€” requires `CriticalPathService` | | `enableUndoRedo` | `boolean` | `false` | Enable undo/redo β€” requires `UndoRedoService` | | `undoRedoActions` | `string[]` | (all actions) | Which action types to track in history | | `undoRedoStepsCount` | `number` | `10` | Maximum undo/redo history depth | | `enablePersistence` | `boolean` | `false` | Persist filter/sort/column state to `localStorage` | | `enableImmutableMode` | `boolean` | `false` | Re-render only changed rows on data refresh | | `allowExcelExport` | `boolean` | `false` | Enable Excel export β€” requires `ExcelExportService` | | `allowPdfExport` | `boolean` | `false` | Enable PDF export β€” requires `PdfExportService` | | `enableContextMenu` | `boolean` | `false` | Enable right-click context menu β€” requires `ContextMenuService` | | `contextMenuItems` | `string[]` \| `ContextMenuItemModel[]` | (defaults) | Context menu items | | `enableVirtualization` | `boolean` | `false` | DOM virtualization for large datasets β€” requires `VirtualScrollService` | | `enableTimelineVirtualization` | `boolean` | `false` | Virtualize timeline columns | | `renderBaseline` | `boolean` | `false` | Show baseline bars alongside current taskbars | | `baselineTemplate` | `string` \| `TemplateRef` | β€” | Custom template for rendering baseline bars | | `baselineColor` | `string` | `'red'` | Baseline bar color | | `allowUnscheduledTasks` | `boolean` | `false` | Allow tasks missing start/end/duration | | `validateManualTasksOnLinking` | `boolean` | `false` | Adjust manual task dates when dependency links change | | `allowParentDependency` | `boolean` | `true` | Allow dependencies between parent/child tasks | | `autoUpdatePredecessorOffset` | `boolean` | `false` | Sync predecessor offsets with actual positions on load | | `enableInfiniteTimelineScroll` | `boolean` | `false` | Enable infinite horizontal timeline scrolling | | `highlightWeekends` | `boolean` | `false` | Shade weekend columns in timeline | | `gridLines` | `string` | `'Both'` | Grid lines: `'Both'` \| `'Horizontal'` \| `'Vertical'` \| `'None'` | | `rowHeight` | `number` | `36` | Height of each row in pixels | | `allowRowDragAndDrop` | `boolean` | `false` | Drag rows to reorder or reparent | | `showColumnMenu` | `boolean` | `false` | Column header context menu β€” requires `ColumnMenuService` | | `timelineSettings` | `TimelineSettingsModel` | β€” | `topTier`, `bottomTier`, `timelineUnitSize`, `weekStartDay` | | `timelineViewMode` | `string` | β€” | Shortcut: `'Hour'` \| `'Day'` \| `'Week'` \| `'Month'` \| `'Year'` | | `projectStartDate` | `Date` \| `string` | (from data) | Fix timeline start bound | | `projectEndDate` | `Date` \| `string` | (from data) | Fix timeline end bound | | `holidays` | `HolidayModel[]` | `[]` | Non-working days with labels β€” requires `DayMarkersService` | | `eventMarkers` | `EventMarkerModel[]` | `[]` | Vertical marker lines β€” requires `DayMarkersService` | | `resources` | `object[]` | β€” | Resource data array | | `resourceFields` | `ResourceFieldsModel` | β€” | Maps resource `id`, `name`, `unit`, `group` fields | | `locale` | `string` | `'en-US'` | Culture code for localization (e.g. `'fr'`, `'ar'`) | | `enableRtl` | `boolean` | `false` | Right-to-left layout | | `timezone` | `string` | (browser) | IANA timezone (e.g. `'UTC'`, `'America/New_York'`) | | `durationUnit` | `string` | `'Day'` | Default duration unit: `'Day'` \| `'Hour'` \| `'Minute'` | | `workUnit` | `string` | `'Hour'` | Work scheduling unit: `'Hour'` \| `'Day'` \| `'Minute'` | | `workWeek` | `string[]` | Mon–Fri | Working days: `['Monday','Tuesday','Wednesday','Thursday','Friday']` | | `includeWeekend` | `boolean` | `false` | Treat all 7 days as working days | | `dayWorkingTime` | `object[]` | `[{from:8,to:17}]` | Working hour ranges per day: `[{ from: 8, to: 12 }, { from: 13, to: 17 }]` | | `dateFormat` | `string` | `'MM/dd/yyyy'` | Global date display format for all date columns | | `splitterSettings` | `SplitterSettingsModel` | β€” | `position`, `columnIndex`, `view` for TreeGrid/chart split | | `loadingIndicator` | `LoadingIndicatorModel` | β€” | `indicatorType`: `'Spinner'` \| `'Shimmer'` |