GanttProps

GanttProps is the full prop surface of ReactGanttChart. It and every type named in the tables below are exported from the package root, apart from Dayjs, ReactNode and React.MouseEvent, which come from dayjs and react:

import { ReactGanttChart, type GanttProps } from '@jaeungkim/gantt-chart';

Every prop is optional. The Default column carries the value the component actually falls back to; none means the prop has no fallback and the feature it drives stays off.

Data

Prop	Type	Default	Description
`tasks`	`Task[]`	`[]`	The task array. See Task data.
`onTasksChange`	`(updatedTasks: Task[]) => void`	none	Fires with the whole array after any committed edit. See Editing tasks.

Layout and size

Prop	Type	Default	Description
`height`	`number \| string`	`600`	Chart height, a number in px or any CSS length. See Quick start.
`width`	`number \| string`	`"100%"`	Chart width, a number in px or any CSS length. See Quick start.
`className`	`string`	none	Appended to the container's `gantt-container` class. See Theming.

Task list

Prop	Type	Default	Description
`showTaskList`	`boolean`	`columns !== undefined`	Shows the left pane. See Task list and hierarchy.
`columns`	`GanttColumn[]`	`DEFAULT_COLUMNS` — Name / Start / End	Column definitions for the pane. See Task list and hierarchy and GanttColumn.

Hierarchy and grouping

Prop	Type	Default	Description
`hierarchy`	`boolean`	`false`	Derives depth and summary rows from `parentId`. See Task list and hierarchy.
`collapsedIds`	`string[]`	none — the chart keeps its own list	Controlled collapsed set. See Task list and hierarchy.
`defaultCollapsedIds`	`string[]`	`[]`	Uncontrolled seed, read once on mount. See Task list and hierarchy.
`onCollapsedChange`	`(collapsedIds: string[]) => void`	none	Fires on every collapse toggle, controlled or not. See Task list and hierarchy.
`groupBy`	`GanttGroupBy`	none	Groups rows into swimlanes. See Grouping and swimlanes and GanttGroupBy.
`ungroupedLabel`	`string`	`"Ungrouped"`	Header label for tasks with no group value. See Grouping and swimlanes.

Timeline and range

Prop	Type	Default	Description
`defaultScale`	`GanttScaleKey`	`"month"` — only when no scale is stored under `storageKey`	Seed scale for a fresh session. See The timeline.
`visibleStart`	`string`	none — the range fits the tasks	Pins the timeline's start to this ISO date. See The timeline.
`visibleEnd`	`string`	none — the range fits the tasks	Pins the timeline's end to this ISO date. See The timeline.
`showNonWorkingDays`	`boolean`	`true`	Shades weekends and holidays. See The timeline.
`holidays`	`string[]`	none — no dates are treated as holidays	ISO date strings shaded as non-working. See The timeline.
`isNonWorkingDay`	`(date: Dayjs) => boolean`	none — the weekend plus `holidays` check is used	Replaces the built-in non-working-day test. See The timeline.
`markers`	`GanttMarker[]`	`[]`	Labelled vertical lines at given dates. See The timeline and GanttMarker.
`rangeBands`	`GanttRangeBand[]`	`[]`	Shaded bands covering a date range. See The timeline and GanttRangeBand.
`onRangeChange`	`(range: GanttDateRange) => void`	none	Fires whenever the rendered range changes. See The timeline.

Zoom and scrolling

Prop	Type	Default	Description
`zoomOnWheel`	`boolean`	`false`	Ctrl/Cmd + wheel steps through the scale ladder. See The timeline.
`infiniteScroll`	`boolean`	`false`	Grows the rendered range when either end is approached. See The timeline.
`initialScrollTo`	`"today" \| string`	none	Scrolls once, after the timeline first renders. See Imperative API.
`autoScrollOnDrag`	`boolean`	`true`	A bar drag at a viewport edge scrolls the timeline. See Editing tasks.

Editing permissions

Prop	Type	Default	Description
`readOnly`	`boolean`	`false`	Blocks moving, resizing and progress dragging on every task. See Editing tasks.
`allowMove`	`boolean`	`!readOnly`	Allows moving bars, overriding `readOnly`. See Editing tasks.
`allowResize`	`boolean`	`!readOnly`	Allows resizing bars, overriding `readOnly`. See Editing tasks.
`allowProgressChange`	`boolean`	`!readOnly`	Allows dragging the progress handle, overriding `readOnly`. See Editing tasks.
`allowTaskCreate`	`boolean`	`!readOnly`	Allows drawing a new task on empty row space. See Editing tasks.
`allowRowReorder`	`boolean`	`false`	Allows dragging a task list row to reorder and re-parent. See Reordering rows.
`minDate`	`string`	none	Earliest ISO date any bar may be dragged to. See Editing tasks.
`maxDate`	`string`	none	Latest ISO date any bar may be dragged to. See Editing tasks.

Dependencies

Prop	Type	Default	Description
`allowLinkCreate`	`boolean`	`!readOnly`	Allows drawing dependencies between bars. See Dependencies.
`allowLinkDelete`	`boolean`	`!readOnly`	Allows selecting and deleting dependency arrows. See Dependencies.
`onDependencyCreate`	`(change: GanttDependencyChange) => boolean \| void`	none	Runs before a drawn link is applied; `false` rejects it. See Dependencies.
`onDependencyDelete`	`(change: GanttDependencyChange) => boolean \| void`	none	Runs before an arrow is removed; `false` keeps it. See Dependencies.

Scheduling

Prop	Type	Default	Description
`schedulingPolicy`	`SchedulingPolicy`	`"off"`	How a move propagates to successors. See Scheduling.
`onSchedulingCycle`	`(taskIds: string[]) => void`	none	Fires with the ids caught in a dependency cycle. See Scheduling.
`workingCalendar`	`boolean`	`false`	Routes every date calculation through a working-day calendar. See Scheduling.
`criticalPath`	`boolean`	`false`	Computes the critical path and fills in the slack fields. See Scheduling.

Rendering

Prop	Type	Default	Description
`renderBar`	`GanttBarRenderer`	none — the built-in bar is used	Replaces the bar node entirely. See Custom rendering and Renderers.
`renderTooltip`	`GanttTooltipRenderer`	none — the built-in tooltip is used	Replaces the hover and drag tooltip node. See Custom rendering and Renderers.
`renderHeaderCell`	`GanttHeaderCellRenderer`	none — the built-in header cell is used	Replaces a timeline header cell in both rows. See Custom rendering and Renderers.
`renderBaseline`	`(task: TaskTransformed) => ReactNode`	none — the built-in baseline bar is used	Replaces the baseline bar for tasks carrying `baselineStart`. See Scheduling.
`showTooltip`	`boolean`	`true`	Shows the hover and drag tooltips. See Custom rendering.

Events

Prop	Type	Default	Description
`onTaskClick`	`(task: TaskTransformed, event: React.MouseEvent) => void`	none	Fires on a bar or row click, not after a drag. See Events and cancellable changes.
`onTaskDoubleClick`	`(task: TaskTransformed, event: React.MouseEvent) => void`	none	Fires on a double click. See Events and cancellable changes.
`onTaskSelect`	`(task: TaskTransformed \| null) => void`	none	Fires when the selection changes, `null` on an empty-timeline click. See Events and cancellable changes.
`selectable`	`boolean`	`onTaskSelect !== undefined`	Turns click-to-select and its highlight on. See Events and cancellable changes.
`onBeforeTaskChange`	`GanttBeforeChangeHandler`	none	Runs before a move, resize or progress change is written, and can cancel it. See Events and cancellable changes and Changes.
`onTaskCreate`	`(draft: GanttTaskDraft) => void`	none	Fires with the range drawn on empty row space. See Editing tasks.
`onReorder`	`(change: GanttReorderChange) => void \| boolean`	none	Runs before a row drop is committed; `false` cancels it. See Reordering rows.

Locale and theme

Prop	Type	Default	Description
`locale`	`string`	none — the built-in English labels are used	BCP 47 tag for every date label. See Locale and date formats.
`formats`	`GanttFormatOverrides`	none — the locale's labels are used	Per-scale `tick` / `header` / `tooltip` label overrides. See Locale and date formats.
`firstDayOfWeek`	`number`	none — week grouping is off	`0` = Sunday .. `6` = Saturday, groups the week scale's top header. See Locale and date formats.
`theme`	`GanttTheme`	none — no theme class is attached	`'light'`, `'dark'` or `'system'`. See Theming.

Storage

Prop	Type	Default	Description
`storageKey`	`string`	`"gantt-scale"`	sessionStorage key the scale selection is stored under. See The timeline.
`historyLimit`	`number`	`100`	Undo steps kept; `0` turns undo off. See Imperative API.

Defaults that are not what they look like

showTaskList has no fixed default. Left out, the pane is on exactly when columns is given. Passing columns alone turns the pane on; passing showTaskList: true alone shows it with DEFAULT_COLUMNS.
selectable has no fixed default either. Left out, selection is on exactly when onTaskSelect is given. Pass true for the highlight without a callback, false to turn it off entirely.
allowMove, allowResize, allowProgressChange, allowTaskCreate, allowLinkCreate, allowLinkDelete default to !readOnly, not to true. A task's own flag of the same name wins over the chart-level one, and a task's own readOnly sits between them. See GanttInteractionConfig.
allowTaskCreate on its own draws nothing: onTaskCreate must also be given.
defaultScale is a seed, not a controlled value. A scale the user picked is saved under storageKey in sessionStorage and wins on remount, and changes to the prop after mount are ignored.
collapsedIds and defaultCollapsedIds are the controlled and uncontrolled halves of one value. Passing collapsedIds makes the chart show that list and stop tracking its own; onCollapsedChange still fires in both modes.
theme left out attaches no theme class at all — the host app decides. 'system' resolves to null during server rendering and the first hydration render, then to the real setting.
historyLimit: 0 does not mean unlimited. It empties the stack and turns undo off.
storageKey is one key for the whole page. Two charts that leave it at "gantt-scale" share a scale, and the last change made applies to both.
visibleStart and visibleEnd are independent. Pinning one end also stops infiniteScroll from extending the range on that side; the other side still extends.
workingCalendar builds its calendar from holidays and isNonWorkingDay, the same configuration that drives showNonWorkingDays shading.

Notes

DEFAULT_COLUMNS is an internal constant, not a public export. It names the fallback columns in the table above but cannot be imported from the package — pass your own columns array instead. See Task list and hierarchy.
Dayjs comes from the dayjs package, and ReactNode / React.MouseEvent from react. None of the three is re-exported from this package.
ReactGanttChart also takes a ref of type GanttHandle for scrolling, zooming, undo/redo and PNG export. It is not part of GanttProps — see GanttHandle.

On this page