Syncfusion React Gantt Chart

Syncfusion React Gantt Chart

The Syncfusion React Gantt Chart (GanttComponent) is a powerful project management component for visualizing, scheduling, and managing tasks over a timeline. It supports auto/manual scheduling, task dependencies, resource planning, interactive editing, Excel/PDF export, and rich customization.

When to Use This Skill

• Implementing a Gantt chart or project timeline in a React app
• Configuring task scheduling (auto, manual, custom modes)
• Setting up task dependencies (FS, SS, FF, SF) and constraints (ASAP, MSO, FNET, etc.)
• Binding local or remote data to the Gantt (local array, DataManager, UrlAdaptor, Ajax)
• Customizing taskbars, labels, milestones, and baselines
• Configuring resources and resource views (including multi-taskbar)
• Enabling editing (dialog, cell, taskbar drag) with validation rules
• Setting up column resize, reorder, freeze, or column menu
• Configuring WBS codes, tree column icons, or serial number columns
• Setting up filtering, sorting, or selection
• Scrolling to specific dates or controlling scroll position programmatically
• Exporting Gantt to Excel or PDF
• Handling Gantt events and enabling advanced features (undo/redo, virtual scroll, critical path, etc.)
• Globalization, localization, and RTL support

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package dependencies
• Vite / CRA project setup
• Theme package installation and CSS import via npm theme packages
• Basic GanttComponent with taskFields mapping
• Module injection guide (all available services)
• gridLines prop ('Both' / 'Horizontal' / 'Vertical' / 'None')
• First render walkthrough with minimal example, output summary, and common gotchas

Data Binding

📄 Read: references/data-binding.md

• Local array data binding
• Remote / AJAX data binding with DataManager
• Self-referential flat data
• taskFields configuration (id, name, startDate, endDate, duration, progress, child)
• Custom field mapping
• UrlAdaptor for server-side CRUD (url + batchUrl)
• RemoteSaveAdaptor for local rendering with server persistence
• Sending additional parameters to server via Query.addParams() in load event
• Binding with Ajax class (manual fetch)
• Load child on demand (loadChildOnDemand={false}, hasChildMapping)
• Handling HTTP errors with actionFailure event

Task Scheduling

📄 Read: references/task-scheduling.md

• Auto, Manual, and Custom scheduling modes (taskMode)
• Unscheduled tasks (duration-only, date-only, none)
• Project start date and end date configuration
• How scheduling mode affects parent task calculation
• Switching between modes dynamically

Task Dependency

📄 Read: references/task-dependency.md

• Dependency types: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF)
• Mapping taskFields.dependency in data source (string format: "2FS", "2FS+3d", "2SS+2h")
• Multiple predecessors per task (comma-separated: "2FS,3FS")
• Offset values with units: day, hour, minute (e.g., "2FS+3h", "2FS-1d")
• Drawing dependencies via UI (drag from taskbar connection points)
• Programmatic dependency management (addPredecessor, removePredecessor, updatePredecessor)
• Connector line customization (connectorLineWidth, connectorLineBackground)
• Predecessor Offset Synchronization
• autoUpdatePredecessorOffset={true} — recalculate offsets on load to account for calendar rules (weekends, holidays)
• autoUpdatePredecessorOffset={false} — display original offsets even if not matching rendered lines (visual inconsistency possible)
• Offset Updates During Editing
• updateOffsetOnTaskbarEdit={true} — auto-recalculate offsets when dragging taskbars (default)
• updateOffsetOnTaskbarEdit={false} — preserve offsets; manual update required via dependency dialog
• Dependency Validation Modes (in actionBegin event with requestType === 'validateLinkedTask')
• respectLink={true} — revert invalid edits to maintain dependency integrity
• removeLink={true} — remove conflicting dependencies to allow edits
• preserveLinkWithEditing={true} — update offsets to maintain links (default mode)
• Validation Dialog — disable all modes to show user-choice dialog (cancel edit, remove link, adjust offset)
• Parent Dependencies — allowParentDependency={true} allows cross-parent dependencies; false restricts to siblings only
• Show/Hide Dependencies Dynamically — toggle .e-gantt-dependency-view-container CSS visibility
• Disable Validation — enablePredecessorValidation={false} disables auto-date validation based on predecessor links

Task Constraints

📄 Read: references/task-constraints.md

• Eight constraint types: ASAP, ALAP, MSO, MFO, SNET, SNLT, FNET, FNLT
• Mapping taskFields.constraintType and taskFields.constraintDate
• How constraints interact with dependencies and taskMode
• Editing constraints via dialog
• Validation and conflict handling

Timeline and Zooming

📄 Read: references/timeline.md

• timelineViewMode quick presets (Hour, Day, Week, Month, Year)
• Top tier and bottom tier independent configuration (unit, format, count, formatter)
• Combining timeline cells using count (merge multiple units per cell)
• Custom timeline cell formatting using formatter (tier + mode aware)
• Timeline view dates with viewStartDate / viewEndDate (lock visible range)
• weekStartDay — controls which day starts a week column (0=Sun, 1=Mon…)
• Automatic timescale updates using updateTimescaleView
• Dynamic timeline mode change at runtime (update timelineViewMode + refresh())
• Timeline cell tooltip visibility using showTooltip
• Timeline template customization using timelineTemplate ({ date, value, tier })
• Infinite timeline scrolling using enableInfiniteTimelineScroll (extends the visible range while navigating with horizontal scrollbar or scroll arrows)
• Timeline navigation using previousTimeSpan() / nextTimeSpan()
• Zooming with toolbar (ZoomIn, ZoomOut, ZoomToFit)
• Customizing zoom steps with zoomingLevels (ZoomTimelineSettings)
• Programmatic zoom methods: zoomIn(), zoomOut(), fitToProject()
• Timeline cell width using timelineUnitSize
• Weekend handling:
• Highlight weekends with highlightWeekends={true}
• Hide weekends using timelineSettings.showWeekend (with noted limitations)

Columns

📄 Read: references/columns.md

• Column types overview (tree column, WBS, custom columns)
• Auto-generated columns (omit ColumnsDirective)
• Column rendering with valueAccessor (custom display values, concatenation)
• Expression columns (calculated values via valueAccessor)
• Display serial numbers via rowDataBound
• Tree column configuration (treeColumnIndex)
• Customize expand/collapse icons (CSS override)
• Customize indentation via queryCellInfo
• collapseAllParentTasks — collapse all on load
• taskFields.expandState — per-row initial expand/collapse
• Persist expand/collapse state in localStorage
• WBS (Work Breakdown Structure) column
• enableWBS + enableAutoWbsUpdate APIs
• Manual WBS with taskFields.wbsPredecessor
• Column headers, format, and alignment
• headerTemplate for custom header rendering
• Header text wrapping (treeGrid.textWrapSettings.wrapMode)
• Dynamic header text update (getColumnByField + refreshHeader)
• Column templates (custom cell rendering) and editTemplate
• Column spanning and frozen columns (frozenColumns, inject Freeze)

Column Interactions

📄 Read: references/column-interactions.md