Implement, configure, and customize the Syncfusion React Gantt Chart component. Use this when building project scheduling applications with task timelines, dependencies, and resource management. Covers GanttComponent setup, task constraints, taskbar customization, filtering, sorting, Excel/PDF expor

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](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](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](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](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](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](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](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](references/column interactions.md) Column resizing ( allowResizing , inject Resize ) Restrict with minWidth / maxWidth per column Prevent resize per column ( allowResizing={false} ) Resize modes: Normal vs Auto ( resizeSettings.mode ) Programmatic resize ( reorderColumns , refreshColumns ) Resize events: resizeStart , resizing , resizeStop Column reorder ( allowReordering , inject Reorder ) Disable reorder per column ( allowReordering={false} ) Programmatic reorder: reorderColumns , reorderColumnByIndex , reorderColumnByTargetIndex Reorder drag events: columnDragStart , columnDrag , columnDrop Column menu ( showColumnMenu , inject ColumnMenu ) Built in items: SortAscending, SortDescending, AutoFit, AutoFitAll, ColumnChooser, Filter Custom column menu items + columnMenuClick event Disable per column ( showColumnMenu={false} ) Toggling column visibility (show/hide columns) Rows 📄 Read: [references/rows.md](references/rows.md) Row drag and drop (reorder and reparent tasks) Indent and outdent (change task hierarchy) Row spanning via queryCellInfo event QueryCellInfoEventArgs with rowSpan , colSpan , cell , data , column Horizontal spanning ( colSpan ) and vertical spanning ( rowSpan ) Row height configuration Row styling via rowDataBound Expand and collapse rows programmatically Managing Tasks 📄 Read: [references/managing tasks.md](references/managing tasks.md) Adding new tasks (toolbar, context menu, programmatic addRecord() ) Editing tasks — dialog edit ( mode: 'Dialog' ), cell edit ( mode: 'Auto' ), taskbar drag Deleting tasks (toolbar, deleteRecord() , showDeleteConfirmDialog ) Taskbar drag editing: move, resize right edge, progress handle, dependency drawing Splitting and merging tasks ( taskFields.segments , splitTask() , mergeTask() ) Cell edit types ( editType ): stringedit , numericedit , datepickeredit , datetimepickeredit , dropdownedit , booleanedit edit.params for min/max/step/format/dataSource per column Customizing add/edit dialog fields ( addDialogFields , editDialogFields ) Server side CRUD with UrlAdaptor ( url + batchUrl ) Server receives added , changed , deleted arrays in the batch request body Column level validation rules ( validationRules on ColumnDirective ) Built in rules: required , min , max , minLength , date , regex Custom validator functions ( [fn, 'message'] callback pattern) Filtering and Searching 📄 Read: [references/filtering searching.md](references/filtering searching.md) Basic column filtering ( allowFiltering={true} , inject Filter ) Filter hierarchy modes: Parent , Child , Both , None Filter menu (string, number, date operators) and Excel like checklist filter Toolbar search box ( searchSettings : fields , operator , ignoreCase ) Initial filter state on load ( filterSettings.columns array) Programmatic filter API: filterByColumn() , clearFiltering() Custom multi column filter predicates Sorting 📄 Read: [references/sorting.md](references/sorting.md) Single column and multi column sorting Initial sort state ( sortSettings ) Custom sort comparers Programmatic sorting API Selection 📄 Read: [references/selection.md](references/selection.md) Row selection modes (single, multiple) Cell selection Keyboard based selection Programmatic selection API ( selectRow , selectCell ) Taskbar, Labels, and Markers 📄 Read: [references/taskbar labels markers.md](references/taskbar labels markers.md) Taskbar template (custom rendering) Parent taskbar and milestone customization Tooltip settings and templates ( tooltipSettings for taskbar, connector line, baseline, timeline) Disable/hide tooltips for specific UI targets using beforeTooltipRender Left, right, and task label configuration Data markers / indicators Event markers (deadlines, holidays on timeline) Baseline rendering Baseline template customization using baselineTemplate

syncfusion-react-gantt-chart