Use this skill when the user needs to:

Set up the Gantt Chart in a Vue 2 (Vue CLI) or Vue 3 (Vite) project
Bind data — local arrays, self-referential data, or remote DataManager sources
Schedule tasks — auto/manual modes, duration, baselines, unscheduled tasks, work calendar
Manage task dependencies — FS, FF, SS, SF predecessor types, connector lines
Edit tasks — cell editing, dialog editing, taskbar drag/resize, adding/deleting rows, indent/outdent
Work with resources — assign resources, resource view, multi-taskbar view
Configure columns — reorder, resize, freeze, span, templates, WBS, checkbox
Customize the timeline — top/bottom tiers, zooming, time units (hour to decade)
Filter and sort — column menu filter, Excel-like filter, toolbar search, sorting
Select rows or cells — row/cell selection, selection events
Use the toolbar — built-in items (Add, Edit, Delete, Search, ExpandAll…) and custom items
Customize taskbars and labels — templates, data markers/indicators, tooltips (taskbar / connector line / baseline / timeline), label settings
Add event markers and holidays — project milestone lines, non-working days
Export — Excel (single/multiple Gantt, custom data) and PDF (headers, footers, custom)
Control layout — splitter position, loading animation, state persistence
Undo / Redo actions in the Gantt
Enable virtual scrolling for large datasets
Configure timezone and globalization — locale, RTL, timezone offset
Context menu — right-click quick actions for rows and column headers
Critical path — highlight tasks that determine the project end date

Component Overview

Feature	Module to Inject	Key Property / API
Editing	`Edit`	`editSettings`
Filtering	`Filter`	`allowFiltering`
Sorting	`Sort`	`allowSorting`
Selection	`Selection`	`selectionSettings`
Toolbar	`Toolbar`	`toolbar`
Day Markers	`DayMarkers`	`eventMarkers`, `holidays`
Excel Export	`ExcelExport`	`excelExport()`
PDF Export	`PdfExport`	`pdfExport()`
Virtual Scroll	`VirtualScroll`	`enableVirtualization`
Critical Path	`CriticalPath`	`enableCriticalPath`
Undo / Redo	`UndoRedo`	`enableUndoRedo`, `undoRedoStepsCount`, `undoRedoActions`
Column Menu	`ColumnMenu`	`showColumnMenu`
Context Menu	`ContextMenu`	`contextMenuItems`

Package: @syncfusion/ej2-vue-gantt
Component tag: <ejs-gantt>
Composition API import: GanttComponent as EjsGantt
Options API component key: 'ejs-gantt': GanttComponent

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Vite (Vue 3) and Vue CLI (Vue 2) project setup
Installing @syncfusion/ej2-vue-gantt
CSS import order (12 dependent stylesheets)
Composition API and Options API registration
Minimal working example with taskFields
Module injection pattern (provide)
Quasar framework setup
Error handling with actionFailure

Data Binding

📄 Read: references/data-binding.md

Local array data (hierarchical and self-referential/flat with parentID)
Remote data with DataManager (ODataV4, WebAPI)
Remote save persistence with RemoteSaveAdaptor (batchUrl)
Sending extra parameters to the server via load + Query.addParams()
Handling server exceptions using actionFailure
Binding data from external Ajax requests (local binding)
Load-on-demand (lazy load child rows)
Immutable data mode
Large data virtual scrolling

Task Scheduling

📄 Read: references/task-scheduling.md

Auto, Manual, Custom scheduling modes (taskMode)
Auto (default): dates validated against working time, holidays, weekends, predecessors
Manual: all dates taken as-is from data source — no auto-adjustment
validateManualTasksOnLinking: true — enforce predecessor dates even in Manual mode
Custom mode: per-task scheduling via taskFields.manual boolean field (true = manual)
taskFields mapping (id, name, startDate, endDate, duration, durationUnit, progress, parentID, dependency, work, type, notes, etc.)
Global duration unit (durationUnit — day, hour, minute; default day)
Map per-task duration unit via taskFields.durationUnit data field
Inline duration unit in duration string: '3days', '12hours', '1800minutes'
Unscheduled task types: start-only, end-only, duration-only, milestone (duration: 0)
allowUnscheduledTasks: false auto-fills missing dates with duration=1 + project start
Working time range (dayWorkingTime with from/to — inject DayMarkers)
Per-day working hours (weekWorkingTime — overrides dayWorkingTime for listed days; unlisted days fall back to dayWorkingTime)
Non-working days: workWeek array + highlightWeekends
includeWeekend: true to count weekends in duration calculations
Baseline rendering (renderBaseline, baselineColor, baselineStartDate/baselineEndDate)

Task Constraints

📄 Read: references/task-constraints.md

8 constraint types table: ASAP (0), ALAP (1), MSO (2), MFO (3), SNET (4), SNLT (5), FNET (6), FNLT (7)
taskFields.constraintType — maps numeric constraint type field from data
taskFields.constraintDate — maps the constraint date field from data
Strict constraint types that trigger violation popup: MSO, MFO, SNLT, FNLT
actionBegin with requestType === 'validateTaskViolation' — intercept violations
args.validateMode.respectMustStartOn/Off flags — silent enforcement (suppress popup)
All four flags: respectMustStartOn, respectMustFinishOn, respectStartNoLaterThan, respectFinishNoLaterThan
Display constraint name as right label via named slot + data.ganttProperties.constraintType
Required modules: Selection, Toolbar, DayMarkers, Edit, Filter, Sort, ContextMenu

Task Dependencies

📄 Read: references/task-dependencies.md

Predecessor types: FS, SS, FF, SF — format "{ID}{Type}" e.g. "2FS", "3SS"
Lag/lead with unit suffix: "2FS+2days", "4FF+960m", "7SS+16h", "3FS-1days"
Multiple predecessors comma-separated: "2FS,3FF"
taskFields.dependency — maps predecessor string field
allowParentDependency: true (default) — allow parent-to-parent/child links
Connector lines render automatically when dependency is mapped
Interactive drawing: drag taskbar handle — requires Edit module + allowTaskbarEditing: true
autoUpdatePredecessorOffset: true — recalculates offsets on initial load to match calendar-adjusted positions
Runtime toggle: this.$refs.gantt.ej2Instances.autoUpdatePredecessorOffset = value
updateOffsetOnTaskbarEdit: false — disables auto offset update when dragging taskbar
actionBegin with requestType === 'validateLinkedTask' — handle dependency validation
args.validateMode.respectLink — revert edit if it violates link
args.validateMode.removeLink — remove link and keep edit
args.validateMode.preserveLinkWithEditing — update offset and keep both (default true)
Validation dialog: shown when all modes disabled; 2 or 3 options depending on direction
Show/hide lines: .e-gantt-dependency-view-container visibility CSS toggle

Managing Tasks (Editing)

📄 Read: references/managing-tasks.md

Enabling editing (editSettings) — inject Edit module
Cell editing (Auto mode), dialog editing, taskbar editing
Cell edit types: numericedit, dropdownedit, booleanedit, datepickeredit, datetimepickeredit
Cell edit template (create/write/read/destroy hooks)
Disable editing for a specific column (columns.allowEditing: false)
Read-only Gantt (readOnly: true)
Adding tasks via toolbar, context menu, or editModule.addRecord()
Open new task dialog with default values (actionBegin + beforeOpenAddDialog)
Customize dialog tabs (addDialogFields / editDialogFields with fields and additionalParams)
Customize Notes tab with RTE inlineMode via additionalParams
Deleting tasks via toolbar or editModule.deleteRow(); confirm dialog with showDeleteConfirmDialog
Indent and outdent — toolbar items or indent() / outdent() methods
Splitting tasks at load time — Hierarchical (taskFields.segments with embedded Segments array) or Self-referential (taskFields.segmentId + segmentData flat collection), dynamically via context menu, dialog, or splitTask()
Merging segments via context menu or drag; limitations (no parent/milestone splits)
Taskbar editing: drag, resize, progress handle, connector points
Prevent taskbar editing for specific tasks (taskbarEditing event + args.cancel)
Hide taskbar edit handles via queryTaskbarInfo + CSS .e-preventEdit
Taskbar editing tooltip (tooltipSettings.editing template)
Touch interaction: double-tap, tap-and-drag, connector point tap
Column validation rules (columns.validationRules)
Custom validation (callback function in validationRules)
Dependency/Resource grid validation via actionBegin (beforeOpenEditDialog)
Server-side CRUD with UrlAdaptor + batchUrl (added/changed/deleted collections)
updateRecordByID(), addRecord(), deleteRow(), indent(), outdent()

Resources

📄 Read: references/resources.md

Defining resource collection and resourceFields
Assigning resources to tasks (resourceInfo)
Resource view layout
Multi-taskbar view
Resource unit and work allocation

Columns

📄 Read: references/columns.md

Column definition (field, headerText, width, format)
ColumnsDirective / e-columns + e-column directives
Column reordering, resizing, spanning
Frozen columns
Column menu
Column templates
WBS (work breakdown structure) column
Responsive columns
Checkbox selection column

Timeline

📄 Read: references/timeline.md

timelineSettings — top tier and bottom tier units
Time units: Hour, Day, Week, Month, Year, Decade
Custom timeline labels / formatters
Zooming (zoom in, zoom out, zoom to fit)
timelineUnitSize
timelineViewMode shortcut (set both tiers at once)
viewStartDate / viewEndDate — fixed visible date range
weekStartDay — custom first day of week (0–6)
updateTimescaleView — auto-update timescale on task changes
showTooltip — timeline cell tooltip on hover
showWeekend — show or hide weekend columns
timelineTemplate — custom cell content for timeline tiers

Filtering and Sorting

📄 Read: references/filtering-and-sorting.md

Column menu filtering (allowFiltering)
Excel-like filter
Toolbar search box
filterSettings configuration
Column sorting (allowSorting)
Multi-column sorting
sortSettings
Programmatic gantt.search(key) method
searchSettings — fields, operator, ignoreCase
Keyboard shortcuts for sort add / remove
Sorting events via actionBegin / actionComplete (args.requestType === 'sorting')
Touch sorting: tap column headers; multi-column sorting uses a popup

Selection

📄 Read: references/selection.md

allowSelection: false — disable selection
Selection mode: 'Row' / 'Cell' / 'Both'
Selection type: 'Single' / 'Multiple'
selectedRowIndex — pre-select a row on initial load
Select rows dynamically (selectRow, selectRows)
Select rows based on condition via dataBound
Cell selection — getSelectedRowCellIndexes()
Multiple cell selection with Ctrl+Click
Select cell dynamically (selectCell)
Toggle selection (enableToggle)
Hover highlighting (enableHover)
selectionSettings full reference table
Programmatic APIs (clearSelection, getSelectedRecords, getSelectedRowIndexes)
Full events table (rowSelecting, rowSelected, rowDeselecting, rowDeselected, cellSelecting, cellSelected, cellDeselected)
Prevent row selection via rowSelecting (args.cancel = true)
Prevent cell selection via cellSelecting (args.cancel = true)
Checkbox selection with checkboxMode options
Touch interaction (single tap + multi-select popup)

Toolbar

📄 Read: references/toolbar.md

Built-in toolbar items: Add, Edit, Update, Delete, Cancel, Search, ExpandAll, CollapseAll, ZoomIn, ZoomOut, ZoomToFit, ExcelExport, PdfExport, PrevTimeSpan, NextTimeSpan, Undo, Redo
Custom toolbar items with click handler
Toolbar events

Taskbar and Labels

📄 Read: references/taskbar-and-labels.md

Taskbar customization (height, color, template)
labelSettings — left, right, taskLabel
Data markers / indicators
Task tooltips
Connector line tooltip
Baseline tooltip
Timeline tooltip
Progress bar customization
Parent and milestone taskbar appearance

Event Markers and Holidays

📄 Read: references/event-markers-and-holidays.md

eventMarkers — vertical lines with labels on key dates
holidays — non-working day highlights
Working time configuration
Weekend highlights (highlightWeekends)
Inject DayMarkers module

Export (Excel and PDF)

📄 Read: references/export.md

Excel export (basic, custom data source, multiple Gantt charts)
PDF export (basic, header/footer, customization)
Export properties and callbacks

Rows and Scrolling

📄 Read: references/rows-and-scrolling.md

rowHeight — uniform row height in pixels (default 46px)
collapseAllParentTasks: true — start all parents collapsed
taskFields.expandState — map a boolean data field to per-task expand/collapse state
expanding / collapsing events — args.cancel = true to block specific rows
expanded / collapsed events — fire after action (no cancel)
rowDataBound — style entire rows; queryCellInfo — style individual cells
Alternate row styling: .e-altrow (grid) + tr.e-chart-row:nth-child(even) (chart)
Row spanning via queryCellInfo args.rowSpan
columns.clipMode — Clip | Ellipsis | EllipsisWithTooltip (default)
Row drag and drop — inject RowDD, Edit; allowRowDragAndDrop: true
allowTaskbarDragAndDrop — taskbar position drag between rows
rowDragStartHelper — prevent drag conditionally via args.cancel
rowDrop — validate/cancel drop; args.dropPosition = 'above'|'below'|'child'
reorderRows(fromIndexes, toIndex, position) — programmatic row reorder
scrollToDate('MM/DD/YYYY') — scroll timeline to a date
scrollToTask('id') — scroll chart to a task's taskbar
setScrollTop(px) — vertical scroll; also via ganttChartModule.scrollObject.setScrollTop()
Responsive container: height: '100%', width: '100%' (parent needs explicit height)
Virtual scrolling: enableVirtualization: true, inject VirtualScroll
enableTimelineVirtualization — render only visible timeline columns

Layout and Splitter

📄 Read: references/layout-and-splitter.md

splitterSettings — column index or position
Loading animation
State persistence (enablePersistence)
localStorage key format ('gantt' + componentId)
Get / set persisted state manually
Prevent specific properties from persisting (addOnPersist override)
Restore header templates after reload (getPersistData + treeGrid.setProperties)
What does NOT persist (column template, headerText, headerTemplate, formatter, valueAccessor)
Global and local context configuration
Height, width, and responsive layout

Undo / Redo

📄 Read: references/undo-redo.md

Enabling undo/redo (enableUndoRedo: true, inject UndoRedo)
undoRedoStepsCount — history depth
undoRedoActions — restrict which actions are tracked
Full supported actions table (19 action types including ZoomIn/Out, ColumnResize, etc.)
Toolbar Undo/Redo items
Programmatic undo() / redo()
getUndoActions() / getRedoActions()
clearUndoCollection() / clearRedoCollection()

Accessibility

📄 Read: references/accessibility.md

WCAG 2.1 Level AA compliance
Keyboard navigation (grid, toolbar, context menu shortcuts)
ARIA roles and attributes (treegrid, row, gridcell, columnheader, dialog)
High contrast theme (highcontrast.css — replace tailwind3/material3 imports)
Screen reader support (NVDA, JAWS, VoiceOver) — taskbarAriaLabel customization via queryTaskbarInfo
Focus management and autoFocusTasks

Programmatic Methods

📄 Read: references/gantt-methods.md

Access instance via this.$refs.gantt (Options API) — ref="gantt" on <ejs-gantt>
Column: autoFitColumns(fieldNames?), getGanttColumns(), getGridColumns(), refreshColumns(), reorderColumns(from, to)
Task editing: cancelEdit(), changeTaskMode(data), convertToMilestone(id), deleteRecord(taskDetail), updateRecordByIndex(index, data), updateTaskId(currentId, newId)
Row expand/collapse: collapseByIndex(index), expandByIndex(index)
Split/Merge: splitTask(taskId, splitDate), mergeTask(taskId, segmentIndexes)
Predecessor: removePredecessor(id)
Querying: getRecordByID(id), getRecordByIndex(), getTaskByUniqueID(id), getTaskInfo(taskId), getCurrentViewData(), getExpandedRecords(records), getCriticalTasks()
DOM access: getRowByID(id), getRowByIndex(index), getTaskbarHeight()
Formatting helpers: getDurationString(duration, unit), getWorkString(work, unit)
Scroll: scrollToTask(taskId), setScrollTop(scrollTop), updateChartScrollOffset(left, top)
Data: updateDataSource(dataSource, args)
Sort: removeSortColumn(columnName)
Selection: selectCells(rowCellIndexes) — requires selectionSettings.mode: 'Cell'

Context Menu

📄 Read: references/context-menu.md

Inject ContextMenu, Edit, Sort, Resize, Selection modules
Enable: enableContextMenu: true, allowSorting: true, allowResizing: true
Default built-in items table: AutoFit, AutoFitAll, SortAscending, SortDescending, TaskInformation, Add, Indent, Outdent, DeleteTask, Save, Cancel, DeleteDependency, Convert
Custom items: mix built-in strings + descriptor objects { text, id, target, iconCss }
target: '.e-content' restricts item to row right-click; target: '.e-gridheader' to header
contextMenuClick event — handle custom actions via args.item.id
contextMenuOpen event — hide items dynamically via args.hideItems; check args.type !== 'Header'
Touch: long press on a row to open context menu

Critical Path

📄 Read: references/critical-path.md

Enabling critical path (enableCriticalPath, inject CriticalPath)
Toolbar toggle button ('CriticalPath')
Customizing critical taskbar colors via queryTaskbarInfo
data.isCritical and data.slack properties
Near-critical task detection using slack time

Timezone and Globalization

📄 Read: references/timezone-and-globalization.md

timezone — IANA string (e.g. 'UTC', 'America/New_York') applied at render time
timezone: 'UTC' — display same times for all users regardless of local clock
Hourly timeline: combine timezone + durationUnit: 'Hour' + dateFormat: 'hh:mm a' + bottom tier unit: 'Hour'
CRUD with timezone: edits operate in configured timezone; actionComplete receives local-time-reversed date for DB persistence
args.data.ganttProperties.endDate in actionComplete — post-edit value already converted back to local time
Timezone class (@syncfusion/ej2-base) — manual timezone arithmetic
timezone.offset(date, tz) → offset in minutes from UTC
timezone.convert(date, fromOffset, toOffset) → date in target timezone (IANA or numeric)
timezone.remove(date, tz) → strips offset, returns wall-clock time as plain date
Locale and globalization (locale, L10n.load())
RTL support (enableRtl: true + locale strings)
Date format configuration on columns (format: 'dd/MM/yyyy' or 'yMd')
currencyCode — set currency for monetary columns

Quick Start (Vue 3 — Composition API)

npm install @syncfusion/ej2-vue-gantt --save

<template>
  <ejs-gantt
    id="gantt"
    :dataSource="data"
    :taskFields="taskFields"
    height="450px"
  ></ejs-gantt>
</template>

<script setup>
import { GanttComponent as EjsGantt } from '@syncfusion/ej2-vue-gantt';

const data = [
  { TaskID: 1, TaskName: 'Planning', StartDate: new Date('04/02/2019'), EndDate: new Date('04/06/2019'), ParentID: null },
  { TaskID: 2, TaskName: 'Identify location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentID: 1 },
  { TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentID: 1 },
];

const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  endDate: 'EndDate',
  duration: 'Duration',
  progress: 'Progress',
  parentID: 'ParentID'
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-vue-gantt/styles/tailwind3.css";
</style>

Quick Start (Vue 3 — Options API)

<script>
import { GanttComponent, Edit, Filter, Sort, Toolbar, Selection, DayMarkers } from '@syncfusion/ej2-vue-gantt';

export default {
  name: 'App',
  components: { 'ejs-gantt': GanttComponent },
  data() {
    return {
      data: [...],
      taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', progress: 'Progress', parentID: 'ParentID' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
      editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true }
    };
  },
  provide: {
    gantt: [Edit, Filter, Sort, Toolbar, Selection, DayMarkers]
  }
};
</script>

Common Patterns

Pattern 1 — Inject Only What You Use

Features in the Gantt Chart require explicit module injection. Only inject modules for features you enable to keep bundle size lean:

// Composition API (Vue 3)
import { provide } from 'vue';
import { Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-vue-gantt';
provide('gantt', [Edit, Filter, Sort, Toolbar]);

// Options API
provide: { gantt: [Edit, Filter, Sort, Toolbar] }

Pattern 2 — Self-Referential vs Hierarchical Data

// Self-referential (flat array with ParentID — recommended for CRUD)
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', parentID: 'ParentID' }

// Hierarchical (nested subtasks array)
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', child: 'subtasks' }

Pattern 3 — Full-Featured Gantt

<ejs-gantt
  :dataSource="data"
  :taskFields="taskFields"
  :editSettings="editSettings"
  :toolbar="toolbar"
  :allowFiltering="true"
  :allowSorting="true"
  :splitterSettings="{ columnIndex: 2 }"
  :timelineSettings="{ topTier: { unit: 'Week' }, bottomTier: { unit: 'Day' } }"
  height="500px"
></ejs-gantt>

Key Props Reference

Prop	Type	Purpose
`dataSource`	Array / DataManager	Task data
`taskFields`	Object	Maps data fields to Gantt fields
`height`	String	Component height (e.g., `'450px'`)
`toolbar`	Array	Toolbar item names or custom item objects
`editSettings`	Object	Controls which edit operations are allowed
`allowFiltering`	Boolean	Enables column filter menu
`allowSorting`	Boolean	Enables column header sorting
`timelineSettings`	Object	Top/bottom tier units and format
`splitterSettings`	Object	Grid/chart panel width split
`labelSettings`	Object	Left, right, and task label fields
`resources`	Array	Resource collection
`resourceFields`	Object	Maps resource id/name fields
`eventMarkers`	Array	Vertical marker lines with labels
`holidays`	Array	Non-working day definitions
`projectStartDate`	Date	Explicit project start
`projectEndDate`	Date	Explicit project end
`enableVirtualization`	Boolean	Virtual row rendering for large data
`enableCriticalPath`	Boolean	Highlights critical path tasks

syncfusion-vue-gantt-chart

Implementing Syncfusion Vue Gantt Chart

When to Use This Skill