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), infinite scrolling
• 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

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 and theme package
• CSS reference using Syncfusion theme packages
• 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

📄 Read: references/baseline.md

• Enabling baseline visualization (renderBaseline: true)
• Baseline field mapping (baselineStartDate, baselineEndDate, baselineDuration)
• Baseline milestone creation (baselineDuration: 0)
• Color customization via baselineColor property or .e-baseline-bar CSS class
• Baseline templates — baselineTemplate for custom rendering, multiple baselines per task (original vs revised)
• Template API access to internal metrics (baselineTop, baselineHeight, taskBarHeight, getTaskLeft())
• Render multiple baselines (compare original/revised/draft schedules)
• Best for: schedule variance tracking, milestone planning, phase comparisons

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(), deleteRecord(), 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
• enableInfiniteTimelineScroll — enable infinite horizontal scrolling (extends timeline dynamically as user navigates)

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)
• Theme support (tailwind3, material, material3, bootstrap5, fluent, fabric, highcontrast) via npm theme packages
• 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: expandByID(), expandByIndex(), collapseByID(), collapseByIndex()
• 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-tailwind3-theme/styles/gantt/index.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