Syncfusion vue gantt chart

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:

// 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