| name | syncfusion-vue-gantt-chart |
| description | Implement Syncfusion Vue Gantt Chart (@syncfusion/ej2-vue-gantt) for Vue 2 and Vue 3. Use this when building project scheduling interfaces with task timelines, dependencies, and resource management. Covers data binding, task scheduling, columns, filtering, editing, Excel/PDF export, critical path, and resource allocation. Supports ejs-gantt and GanttComponent. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44"} |
Implementing Syncfusion Vue Gantt Chart
A project management component that renders a Microsoft Project-like interface for scheduling and managing tasks, dependencies, and resources in Vue 2 and Vue 3 applications.
When to Use This Skill
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:
import { provide } from 'vue';
import { Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-vue-gantt';
provide('gantt', [Edit, Filter, Sort, Toolbar]);
provide: { gantt: [Edit, Filter, Sort, Toolbar] }
Pattern 2 — Self-Referential vs Hierarchical Data
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', parentID: 'ParentID' }
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 |