Methods

Core Methods

render ()

Renders the chart and initializes all components.


apexGantt.render();

update (newOptions)

Updates the entire Gantt chart with new configuration and task data.


apexGantt.update({
  series: [
    {
      id: 'task-1',
      name: 'Design Phase',
      start: '2025-07-01',
      end: '2025-07-10',
      progress: 40
    },
    // more tasks...
  ],
  pixelsPerDay: 25.7,
});

Task Methods

updateTask (taskId, taskData)

Updates the specific task with provided task data.


apexGantt.updateTask('task-1', {
  name: 'Design Phase',
  start: '2025-07-01',
  end: '2025-07-10',
  progress: 40
});

addTask (input, options?)

Inserts a new task and re-renders the chart. The operation is recorded in the undo history and emits a taskAdded event on success. If a beforeTaskAdd hook is configured and returns false, the insertion is cancelled and the method returns null. Throws when input.id is missing or already exists.

options.parentId inserts the task under the given parent; omit for a root-level task. Returns the inserted Task, or null when the hook cancels.


apexGantt.addTask({
  id: 'task-9',
  name: 'Review',
  startTime: '2026-08-01',
  endTime: '2026-08-05',
});

apexGantt.addTask(
  { id: 'subA', name: 'Subtask', startTime: '2026-08-01', endTime: '2026-08-03' },
  { parentId: 'task-9' }
);

deleteTask (taskId, options?)

Removes a task and re-renders. Recorded in the undo history. Dependency edges that reference removed tasks are auto-cleaned in the same transaction, so undo restores tasks and edges atomically.

Cascade modes via options.cascade:

forbid (default): throws when the task has children. Safe default that prevents accidental subtree loss.
children: deletes the task plus every descendant in a single undoable transaction.
orphan: reparents the immediate children to the deleted task's parent, then removes just the task itself.

If beforeTaskDelete returns false, the removal is cancelled and the method returns false. Returns true when the task was removed.


apexGantt.deleteTask('task-3');                          // leaf — uses default 'forbid'
apexGantt.deleteTask('task-1', { cascade: 'children' }); // summary + descendants
apexGantt.deleteTask('task-1', { cascade: 'orphan' });   // keep children, remove summary

moveTask (taskId, options?)

Re-parents a task and re-renders. Recorded in the undo history. Emits a taskMoved event. Pass newParentId: null (or omit) to promote the task to the root level.

Throws when taskId doesn't exist, when newParentId doesn't exist, when moving onto itself, or when the move would create a cycle. Returns true on success, false if beforeTaskMove cancelled.


apexGantt.moveTask('subA', { newParentId: 'task-2' });
apexGantt.moveTask('subA', { newParentId: null });   // promote to root

Dependency Methods

addDependency (fromId, toId, options?)

Creates a dependency edge between two tasks and re-renders the arrow. Recorded in undo history. Emits dependencyAdded. Runs through beforeDependencyChange.

options accepts { type?: 'FS' | 'FF' | 'SS' | 'SF', lag?: number }. Defaults to type: 'FS', lag: 0. Throws when either task doesn't exist or when the edge already exists.


apexGantt.addDependency('t1', 't2');                          // FS, lag 0
apexGantt.addDependency('t1', 't2', { type: 'SS', lag: 2 });

removeDependency (fromId, toId)

Removes a dependency edge and re-renders. Recorded in undo history. Emits dependencyRemoved with the captured type and lag. Runs through beforeDependencyChange. Throws when no edge exists between the two tasks.


apexGantt.removeDependency('t1', 't2');

canAddDependency (fromId, toId, options?)

Returns whether a new edge fromId → toId would be accepted right now, without committing it. Shared by the programmatic API and the interactive draw UI so both apply the same rules.

Returns { ok: true } when the edge would be accepted, or { ok: false, reason } where reason is one of 'self', 'task-missing', 'duplicate', 'cycle', 'summary-descendant', or 'hook-veto'.


const verdict = apexGantt.canAddDependency('t1', 't2');
if (verdict.ok) apexGantt.addDependency('t1', 't2');
else console.warn(verdict.reason);

History Methods

undo ()

Rolls back the most recent recorded transaction; data and DOM return to the pre-operation state. Emits historyChange with kind: 'undo'. Returns true if a transaction was undone, false when the undo stack is empty or history.enabled is false.


apexGantt.updateTask('t1', { progress: 90 });
apexGantt.undo();

redo ()

Replays the most recently undone transaction. Emits historyChange with kind: 'redo'. Any new mutating call between undo() and redo() discards the redo stack. Returns true if a transaction was redone.


apexGantt.redo();

canUndo () / canRedo ()

Returns whether an undoable or redoable transaction is currently on top of the stack. Use to gate custom Undo/Redo UI affordances.


myUndoButton.disabled = !apexGantt.canUndo();
myRedoButton.disabled = !apexGantt.canRedo();

clearHistory ()

Drops every recorded transaction and emits historyChange with kind: 'clear'. Useful after loading a fresh dataset where rolling back to a previous tree state would be incoherent.


apexGantt.update({ series: freshTasks });
apexGantt.clearHistory();

getHistorySize ()

Returns the current undo/redo stack sizes as { undo: number, redo: number }.


const { undo, redo } = apexGantt.getHistorySize();

Selection Methods

getSelectedTasks ()

Returns an array of currently selected task objects. Requires enableSelection: true.


const selected = apexGantt.getSelectedTasks();

setSelectedTasks (ids)

Programmatically set the selection to the given task IDs. Requires enableSelection: true.


apexGantt.setSelectedTasks(['task-1', 'task-3']);

clearSelection ()

Clear all selected tasks. Requires enableSelection: true.


apexGantt.clearSelection();

Sorting Methods

sort (criteria)

Applies a sort to the task list and re-renders. Pass one SortCriterion or an array; an empty array clears the sort (natural input order). Sorting is hierarchy-preserving: siblings reorder within each parent and a child never leaves its parent. Emits sortChange.


apexGantt.sort({ key: ColumnKey.Progress, direction: 'desc' });
apexGantt.sort([{ key: ColumnKey.Progress, direction: 'desc' }, { key: ColumnKey.Name }]);

toggleSort (key, opts?)

Cycles a column's sort through ascending, descending, and none. Backs the header-click UX. No-op when the column is not sortable. With { append: true } (Shift+click) the column is added as an additional sort key instead of replacing the sort. Emits sortChange.


apexGantt.toggleSort(ColumnKey.Name);
apexGantt.toggleSort(ColumnKey.StartTime, { append: true });

getSort ()

Returns the active sort criteria as a SortCriterion[] (empty array when in natural order).


const criteria = apexGantt.getSort();

clearSort ()

Clears the active sort and returns to natural (input) order. Emits sortChange.


apexGantt.clearSort();

Filtering Methods

filter (predicate)

Applies a view-only filter. A task is kept when it matches the predicate or has a matching descendant, so ancestors of matches stay visible. Changes which rows render, never the tree, WBS, or task data. Emits filterChange.


apexGantt.filter((task) => task.progress < 100);

setFilterRules (ruleSet)

Applies a structured filter: a FilterRuleSet of conditions combined with 'all' (AND) or 'any' (OR), compiled to the same view-only filter as filter(). Pass null (or an empty rule list) to clear. Emits filterChange.


apexGantt.setFilterRules({
  match: 'all',
  rules: [{ field: ColumnKey.Progress, operator: 'lt', value: 100 }],
});

getFilterRules ()

Returns the active structured filter rules, or null when none are set.


const rules = apexGantt.getFilterRules();

clearFilter ()

Clears the active filter so every row is shown again. Emits filterChange.


apexGantt.clearFilter();

isFiltered ()

Returns whether a filter is currently active.


if (apexGantt.isFiltered()) { /* ... */ }

Grouping Methods

groupBy (criterion)

Groups the task list by a column key or a GroupCriterion. While grouping is active the parent/child tree is suspended and tasks appear flat under collapsible group headers. View-only: it never mutates the task tree or data. Emits groupChange.


apexGantt.groupBy(ColumnKey.Progress);
apexGantt.groupBy({ field: 'status', label: (v) => `Status: ${v}`, direction: 'desc' });

clearGrouping ()

Clears grouping and restores the exact prior hierarchy. Emits groupChange.


apexGantt.clearGrouping();

getGroupBy ()

Returns the active grouping criterion as a GroupCriterion, or null when not grouping.


const criterion = apexGantt.getGroupBy();

isGrouping ()

Returns whether grouping is currently active.


if (apexGantt.isGrouping()) { /* ... */ }

Column Methods

setColumnWidth (key, px)

Pins a task-list column to an exact pixel width; the other columns absorb the remaining panel space. Mirrors dragging the column-header resize handle. Emits columnResize.


apexGantt.setColumnWidth(ColumnKey.Name, 260);

resetColumnWidths (key?)

Clears the manual width of one column (pass its key) or of every column (omit the argument), returning them to their auto/flex width. Emits columnResize.


apexGantt.resetColumnWidths(ColumnKey.Name);   // one column
apexGantt.resetColumnWidths();                 // all columns

getColumnWidths ()

Returns the active manual column-width overrides as a plain object (key → pixels).


const widths = apexGantt.getColumnWidths();

setColumnOrder (keys)

Sets the left-to-right order of the task-list columns by key. Listed keys are placed first in that order; any visible columns you omit keep their relative position at the end. Emits columnReorder.


apexGantt.setColumnOrder([ColumnKey.Name, ColumnKey.Progress, ColumnKey.StartTime]);

getColumnOrder ()

Returns the current column order as an array of keys (left-to-right), reflecting any reorder.


const order = apexGantt.getColumnOrder();

Split Task Methods

splitTask (taskId, at, options?)

Splits a task into separate worked segments at at, producing a gap on the timeline. The segment containing at is cut so its first piece ends at at and the rest resumes at options.resumeAt (default: the next day). Routed through updateTask, so it is validated, undoable, and emits taskUpdate. No-op on milestones, summary bars, or when at does not fall strictly inside a worked span.


apexGantt.splitTask('t3', '2026-06-10', { resumeAt: '2026-06-14' });

isSplit (taskId)

Returns whether a task is currently split into multiple worked segments.


if (apexGantt.isSplit('t3')) { /* ... */ }

State Methods

getState ()

Captures the current UI view state (zoom, scroll, collapse, selection, sort, filter, grouping, manual column widths, and column order) as a JSON-serializable GanttUiState. Pair with setState() to save and restore where the user left off.


const saved = apexGantt.getState();

setState (state, opts?)

Restores a UI view state produced by getState(). Any omitted field is left untouched, so a partial state (for example { sort: [...] }) applies just that slice. Re-renders once, then emits sortChange / filterChange for the parts that changed. Pass { silent: true } to suppress those events.


apexGantt.setState(saved);
apexGantt.setState({ sort: [{ key: ColumnKey.Name, direction: 'asc' }] });
apexGantt.setState({ collapsed: ['phase-1'] }, { silent: true });

scrollToTask (taskId)

Scrolls the timeline (and, if needed, the row list) so a task's bar is in view, using nearest-edge alignment. Works even when the target row is virtualized out of the DOM. Returns true when a scroll was applied, false when the task is unknown or already fully visible.


apexGantt.scrollToTask('task-42');

Export Methods

exportChart (format?)

Exports the chart as SVG, PNG, or PDF and resolves when the download starts. format defaults to the exportFormat option ('svg'). Under row virtualization the full dataset is captured, not just the visible rows.


await apexGantt.exportChart('png');
await apexGantt.exportChart('pdf');

Lifecycle Methods

destroy ()

Destroys the chart instance and frees all associated resources: removes event listeners, disconnects ResizeObservers, clears the tooltip, clears the DOM, and nulls internal references. After calling destroy(), the instance cannot be reused. Create a new ApexGantt instead. Call before removing the host element from the DOM or in framework cleanup hooks (ngOnDestroy, React useEffect cleanup, Vue onBeforeUnmount).


apexGantt.destroy();

isDestroyed ()

Returns true if the chart has been destroyed or the host element is empty. Use as a guard before calling other methods when unsure whether destroy() has already been called.


if (!apexGantt.isDestroyed()) {
  apexGantt.update({ series: nextTasks });
}

Zoom Methods

zoomIn()

Increases pixelsPerDay to zoom the timeline in. The header tier (year → quarter → month → week → day → halfday → hour → minute) is auto-picked from the new density.


apexGantt.zoomIn();

zoomOut()

Decreases pixelsPerDay to zoom the timeline out. The header tier (minute → hour → halfday → day → week → month → quarter → year) is auto-picked from the new density.


apexGantt.zoomOut();