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
CSS theme imports (all 14 required packages)
Basic
```
GanttComponent
```
with
```
taskFields
```
mapping
Module injection guide (all available services)

gridLines

prop (

'Both'

'Horizontal'

'Vertical'

'None'

)

First render walkthrough with minimal example 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
```
)
Custom timeline cell rendering via
```
formatter
```
function
```
timelineUnitSize
```
— pixel width per cell
```
weekStartDay
```
— controls which day starts a week column (0=Sun, 1=Mon…)
Weekend highlighting (
```
highlightWeekends={true}
```
)
Zoom in, zoom out, zoom to fit (toolbar + programmatic
```
zoomIn()
```
,
```
zoomOut()
```
,
```
fitToProject()
```
)

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

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

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

Adding new tasks (toolbar, context menu, programmatic
```
addRecord()
```
)
Editing tasks — dialog edit (
```
mode: 'Dialog'
```
), cell edit (
```
mode: 'Auto'
```
), taskbar drag
Deleting tasks (toolbar,
```
deleteRow()
```
,
```
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

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

Single-column and multi-column sorting
Initial sort state (
```
sortSettings
```
)
Custom sort comparers
Programmatic sorting API

Selection

📄 Read: 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

Taskbar template (custom rendering)
Parent taskbar and milestone customization
Left, right, and task label configuration
Data markers / indicators
Event markers (deadlines, holidays on timeline)
Baseline rendering
Critical path highlighting

Resources

📄 Read: references/resources.md

Defining resource collection (
```
resources
```
property)
Assigning resources to tasks (
```
taskFields.resourceInfo
```
) — single or multiple with custom units
Resource view layout (
```
viewType='ResourceView'
```
, resource groups)
Multi-taskbar (
```
enableMultiTaskbar={true}
```
) — multiple taskbars per collapsed resource row
Over-allocation highlighting (
```
showOverAllocatedTasks={true}
```
)
Resource unit and work fields (
```
resourceFields.unit
```
,
```
resourceFields.group
```
)
Custom resource taskbar styling via
```
queryTaskbarInfo
```

Toolbar and Context Menu

📄 Read: references/toolbar-context-menu.md

Built-in toolbar items:

Add

Edit

Delete

Update

Cancel

Search

ExpandAll

CollapseAll

Indent

Outdent

ZoomIn

ZoomOut

ZoomToFit

CriticalPath

ExcelExport

CsvExport

PdfExport

ColumnChooser

Undo

Redo

SplitTask

MergeTask

Required services per toolbar item (e.g.
```
Undo
```
/
```
Redo
```
→
```
UndoRedo
```
,
```
SplitTask
```
→
```
Edit
```
)
Custom toolbar buttons (
```
ItemModel
```
) and
```
toolbarClick
```
handler

Default context menu items including

SplitTask

MergeTask

Convert

DeleteDependency

Custom context menu items,

contextMenuClick

contextMenuOpen

(

args.hideItems

)

Enabling/disabling toolbar items dynamically

Excel Export

📄 Read: references/excel-export.md

Basic Excel export
Export properties and customization
Exporting multiple Gantt charts to a single Excel workbook
Custom data source export

PDF Export

📄 Read: references/pdf-export.md

Basic PDF export
Customizing PDF (fonts, columns, styles)
Header and footer configuration
Page settings (orientation, size)

Holidays, Working Time & Timezone

📄 Read: references/holidays-working-time.md

Defining holidays (
```
holidays
```
prop,
```
HolidayModel
```
,
```
DayMarkers
```
service)
Work week configuration (
```
workWeek
```
,
```
includeWeekend
```
)
Daily working time (
```
dayWorkingTime
```
)
Effort-based scheduling (
```
taskFields.work
```
,
```
workUnit
```
, task types: FixedWork / FixedDuration / FixedUnit)
Timezone support (
```
timezone
```
prop, IANA timezone strings)

Splitter

📄 Read: references/splitter.md

Position-based split (
```
splitterSettings.position
```
— percentage or pixels)
Column-based split (
```
splitterSettings.columnIndex
```
)
View mode (
```
splitterSettings.view
```
— Default / Grid / Chart)
Programmatic resize (
```
setSplitterPosition()
```
)

Splitter events (

splitterResizeStart

splitterResizing

splitterResized

)

Scrolling

📄 Read: references/scrolling.md

Setting
```
width
```
and
```
height
```
for scrollbar control
Responsive container (
```
width='100%'
```
,
```
height='100%'
```
with CSS parent height)
Scroll to a date (
```
scrollToDate('MM/dd/yyyy')
```
)

Set vertical scroll position (

ganttChartModule.scrollObject.setScrollTop(px)

)

Virtual Scroll

📄 Read: references/virtual-scroll.md

Row virtualization (

enableVirtualization={true}

VirtualScroll

service)

Timeline virtualization (

enableTimelineVirtualization={true}

, requires

projectStartDate

projectEndDate

)

Combining row + timeline virtualization
Accessing filtered record count with virtual scroll (
```
treeGrid.filterModule.filteredResult
```
)
Virtual scroll limitations (browser memory, cell selection, pixel height, expand state)

Undo / Redo

📄 Read: references/undo-redo.md

Enable undo/redo (
```
enableUndoRedo
```
,
```
UndoRedo
```
service)
```
undoRedoActions
```
— full list of trackable actions and required services
```
undoRedoStepsCount
```
— history stack size
Toolbar
```
'Undo'
```
/
```
'Redo'
```
buttons and
```
Ctrl+Z
```
/
```
Ctrl+Y
```
keyboard shortcuts
Programmatic
```
undo()
```
/
```
redo()
```
via component ref

State Persistence, Immutable Mode & Loading

📄 Read: references/state-persistence.md

State persistence (
```
enablePersistence={true}
```
, unique
```
id
```
prop, localStorage)
Resetting persisted state (change
```
id
```
or clear localStorage entry)

Immutable mode (

enableImmutableMode={true}

, requires

isPrimaryKey={true}

)

Loading animation (

loadingIndicator.indicatorType

'Spinner'

'Shimmer'

)

Manual spinner control (
```
showSpinner()
```
/
```
hideSpinner()
```
)

Localization and RTL

📄 Read: references/localization-rtl.md

Setting locale (
```
locale
```
prop)
Loading custom translations (
```
L10n.load()
```
with
```
'gantt'
```
namespace keys)
Gantt locale key reference (all translatable UI strings)
RTL support (
```
enableRtl={true}
```
)
Column date formatting (
```
format='yMd'
```
,
```
format='dd/MM/yyyy'
```
)
Column number formatting (
```
format='C2'
```
,
```
format='N2'
```
,
```
format='P0'
```
)

Programmatic Methods

📄 Read: references/gantt-methods.md

Column utilities:
```
autoFitColumns()
```

Edit control:

cancelEdit()

openAddDialog()

openEditDialog()

Task management:

deleteRecord()

convertToMilestone()

changeTaskMode()

updateRecordByID()

updateRecordByIndex()

updateTaskId()

updateDataSource()

updateProjectDates()

Toolbar control:
```
enableItems()
```
Expand/Collapse:
```
expandByIndex()
```
,
```
collapseByIndex()
```

Undo/Redo stacks:

clearUndoCollection()

clearRedoCollection()

getUndoActions()

getRedoActions()

Data retrieval:

getCurrentViewData()

getRecordByID()

getTaskByUniqueID()

getTaskInfo()

getTaskbarHeight()

getExpandedRecords()

getGanttColumns()

getGridColumns()

Formatting helpers:
```
getDurationString()
```
,
```
getWorkString()
```
DOM access:
```
getRowByID()
```
,
```
getRowByIndex()
```
Sorting:
```
removeSortColumn()
```
Selection:
```
selectCells()
```
Row reorder:
```
reorderRows()
```
Scrolling:
```
scrollToTask()
```
,
```
updateChartScrollOffset()
```

Events

📄 Read: references/events.md

Lifecycle events (
```
load
```
,
```
created
```
,
```
dataBound
```
)
Task editing events (
```
actionBegin
```
,
```
actionComplete
```
) with
```
requestType
```
reference table
Taskbar events:
```
taskbarEditing
```
,
```
taskbarEdited
```
,
```
taskbarClick
```
Row expand/collapse events:
```
expanding
```
,
```
collapsing
```
,
```
expanded
```
,
```
collapsed
```

Selection events:

rowSelected

rowDeselected

cellSelected

cellDeselected

Export events:
```
excelExportComplete
```
,
```
pdfExportComplete
```

Column interaction events:

resizeStart

resizing

resizeStop

columnDragStart

columnDrag

columnDrop

Event cancellation patterns (
```
args.cancel = true
```
)
Complete all-events quick reference table (30+ events)

Quick Start Example

tsx

import * as React from 'react';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-gantt';

// In App.css:
// @import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css";
// (plus base, buttons, calendars, dropdowns, grids, inputs, layouts,
//  lists, navigations, notifications, popups, richtexteditor, treegrid)

const data = [
  {
    TaskID: 1, TaskName: 'Project Initiation',
    StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'),
    subtasks: [
      { TaskID: 2, TaskName: 'Identify Site Location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil Test', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, Predecessor: '2' },
      { TaskID: 4, TaskName: 'Soil Test Approval', StartDate: new Date('04/08/2024'), Duration: 0, Predecessor: '3FS', Progress: 50 },
    ]
  }
];

const taskFields: TaskFieldsModel = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  endDate: 'EndDate',
  duration: 'Duration',
  progress: 'Progress',
  dependency: 'Predecessor',
  child: 'subtasks',
};

const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true };

function App() {
  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      editSettings={editSettings}
      toolbar={['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit']}
      height="450px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" width="80" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
        <ColumnDirective field="StartDate" />
        <ColumnDirective field="Duration" />
        <ColumnDirective field="Progress" />
      </ColumnsDirective>
      <Inject services={[Edit, Toolbar, Selection]} />
    </GanttComponent>
  );
}

export default App;

Common Patterns

Enable Editing with Dialog

tsx

<GanttComponent
  editSettings={{ allowEditing: true, mode: 'Dialog' }}
>
  <Inject services={[Edit]} />
</GanttComponent>

Enable Cell Editing

tsx

<GanttComponent
  editSettings={{ allowEditing: true, mode: 'Auto' }}
>
  <Inject services={[Edit]} />
</GanttComponent>

Programmatically Add a Task

tsx

const ganttRef = React.useRef<GanttComponent>(null);

const addTask = () => {
  ganttRef.current?.addRecord({ TaskID: 10, TaskName: 'New Task', Duration: 3 }, 'Below', 1);
};

Export to Excel

tsx

<GanttComponent toolbar={['ExcelExport']} allowExcelExport={true}>
  <Inject services={[ExcelExport, Toolbar]} />
</GanttComponent>

Export to PDF

tsx

<GanttComponent toolbar={['PdfExport']} allowPdfExport={true}>
  <Inject services={[PdfExport, Toolbar]} />
</GanttComponent>

Column-Level Validation Rules

tsx

<ColumnsDirective>
  <ColumnDirective field="TaskName" validationRules={{ required: true }} />
  <ColumnDirective field="Duration"  validationRules={{ min: 1, max: 100 }} />
</ColumnsDirective>

Scroll to Date Programmatically

tsx

const ganttRef = React.useRef<GanttComponent>(null);

ganttRef.current?.scrollToDate('04/28/2024');

Column Resize with Min/Max Width

tsx

<ColumnDirective field="TaskName" minWidth="100" maxWidth="400" allowResizing={true} />

Reorder Columns Programmatically

tsx

const ganttRef = React.useRef<GanttComponent>(null);

// By field names:
(ganttRef.current as any).treeGrid.reorderColumns(['Duration', 'Progress'], 'TaskName');

// By index:
(ganttRef.current as any).treeGrid.reorderColumnByIndex(2, 0);

Persist Tree Expand/Collapse State

tsx

// In taskFields — map a boolean field that controls initial expand state:
const taskFields = { ..., expandState: 'isExpand' };

// Or collapse all on load:
<GanttComponent collapseAllParentTasks={true} .../>

Key Module Injections

Feature	Service to Inject
Editing (add/edit/delete/taskbar drag)	`Edit`
Filtering	`Filter`
Sorting	`Sort`
Toolbar	`Toolbar`
Selection	`Selection`
Day Markers / Holidays / Event Markers	`DayMarkers`
Critical Path	`CriticalPath`
Excel / CSV Export	`ExcelExport`
PDF Export	`PdfExport`
Undo / Redo	`UndoRedo`
Column Menu	`ColumnMenu`
Context Menu	`ContextMenu`
Virtual Scrolling	`VirtualScroll`
Row Drag and Drop	`RowDD`
Column Reordering	`Reorder`
Frozen Columns	`Freeze`
Column Resizing	`Resize`

Usage pattern:

tsx

import { GanttComponent, Inject, Edit, Filter, Sort, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';

<GanttComponent ...>
  <Inject services={[Edit, Filter, Sort, Toolbar, Selection]} />
</GanttComponent>

Key Props Reference

Prop	Type	Purpose
`dataSource`	object[] / DataManager	Task data (local or remote via DataManager)
`taskFields`	TaskFieldsModel	Field mapping for task properties
`editSettings`	EditSettingsModel	Enable add/edit/delete/taskbar editing
`toolbar`	string[]	Toolbar items to render
`taskMode`	Auto / Manual / Custom	Scheduling mode
`resources`	object[]	Resource data collection
`resourceFields`	ResourceFieldsModel	Resource field mapping
`allowSorting`	boolean	Enable sorting
`allowFiltering`	boolean	Enable filtering
`allowReordering`	boolean	Enable column reorder
`allowResizing`	boolean	Enable column resize
`allowExcelExport`	boolean	Enable Excel export
`allowPdfExport`	boolean	Enable PDF export
`undoRedoActions`	string[]	Actions tracked by undo/redo
`timelineSettings`	TimelineSettingsModel	Timeline tiers and unit config
`splitterSettings`	SplitterSettingsModel	Grid/chart panel ratio
`highlightWeekends`	boolean	Shade weekend columns
`holidays`	HolidayModel[]	Mark holiday dates
`eventMarkers`	EventMarkerModel[]	Vertical markers on timeline
`treeColumnIndex`	number	Column index showing expand/collapse icons
`collapseAllParentTasks`	boolean	Collapse all parent rows on initial load
`enableWBS`	boolean	Auto-generate WBS codes from task hierarchy
`enableAutoWbsUpdate`	boolean	Recalculate WBS codes after CRUD/sort/DnD
`frozenColumns`	number	Number of left-pinned (frozen) columns
`enableMultiTaskbar`	boolean	Show multiple taskbars per resource row
`viewType`	string	`'ProjectView'` or `'ResourceView'`
`showColumnMenu`	boolean	Show column-level menu (sort, filter, autofit)
`columnMenuItems`	string[]	Restrict which column menu items are shown
`showColumnChooser`	boolean	Enable column chooser dialog via toolbar `ColumnChooser` item
`allowSelection`	boolean	Enable row/cell selection
`selectionSettings`	SelectionSettingsModel	Selection mode ( `Row` / `Cell` ), type ( `Single` / `Multiple` )
`gridLines`	string	Grid lines style: `'Both'` \| `'Horizontal'` \| `'Vertical'` \| `'None'`
`renderBaseline`	boolean	Show baseline bars alongside actual taskbars
`baselineColor`	string	CSS color for baseline bars
`enableCriticalPath`	boolean	Highlight critical path tasks and connectors
`enableRtl`	boolean	Enable right-to-left layout
`locale`	string	Locale code (e.g. `'fr'` , `'de'` , `'ar'` )
`allowRowDragAndDrop`	boolean	Enable row drag-and-drop reordering/reparenting
`enableImmutableMode`	boolean	Only re-render changed rows on data updates (requires `isPrimaryKey` )
`enablePersistence`	boolean	Persist UI state (sort, filter, column widths) to localStorage
`loadingIndicator`	object	Loading animation type: `{ indicatorType: 'Spinner' \| 'Shimmer' }`
`workWeek`	string[]	Working days, e.g. `['Monday','Tuesday','Wednesday','Thursday','Friday']`
`includeWeekend`	boolean	Count weekends as working days for duration calculation
`timezone`	string	IANA timezone for the Gantt (e.g. `'America/New_York'` )
`showOverAllocatedTasks`	boolean	Highlight over-allocated resources in ResourceView
`enableUndoRedo`	boolean	Enable undo/redo tracking (inject `UndoRedo` service)
`undoRedoStepsCount`	number	Maximum undo/redo history steps (default: 10)
`enableVirtualization`	boolean	Row virtualization for large data sets
`enableTimelineVirtualization`	boolean	Timeline (horizontal) virtualization
`rowHeight`	number	Uniform row height in pixels
`taskbarHeight`	number	Height of taskbars in pixels (must be ≤ `rowHeight` )
`connectorLineWidth`	number	Width of dependency connector lines
`connectorLineBackground`	string	Color of dependency connector lines

syncfusion-react-gantt-chart

NPX Install

Tags

SKILL.md Content