Every prop ReactGanttChart accepts, with its type and default
GanttProps is the full prop surface of ReactGanttChart.
import { ReactGanttChart, type GanttProps } from '@jaeungkim/gantt-chart';
Every prop is optional. Every type in the tables below is exported from the package root apart
from Dayjs, ReactNode and React.MouseEvent. The Default column carries the value the
component falls back to. none means there is no fallback and the feature the prop drives stays
off.
Scale the chart is built at, read once. See The timeline.
onScaleChange
(scale: GanttScaleKey) => void
none
Fires after every committed scale change, from any source. See The timeline.
visibleStart
string
none
Pins the timeline's start to this ISO date. Omitted, the range fits the tasks. See The timeline.
visibleEnd
string
none
Pins the timeline's end to this ISO date. Omitted, the range fits the tasks. See The timeline.
showNonWorkingDays
boolean
true
Shades non-working days and shows holiday names. See The timeline.
workingWeekdays
number[]
[1, 2, 3, 4, 5]
UTC day numbers that are worked, 0 is Sunday. The default is Monday to Friday. Read by identity. See The timeline.
holidays
(string | Holiday)[]
none
Days off on top of workingWeekdays, given as a YYYY-MM-DD string or a Holiday object. Omitted, the weekly rule is the only source. Read by identity. See The timeline.
onRangeChange
(range: GanttDateRange) => void
none
Fires whenever the rendered range changes. See The timeline.
selectable has no fixed default. Omitted, selection is on when onTaskSelect is given, and
whenever the detail panel is on. Pass true for the highlight without a callback, false to
turn it off entirely.
showDetail works the same way. Omitted, the detail panel exists when renderDetail is given.
Turning the panel on also turns row selection on, unless selectable is given. See
Detail panel.
allowMove, allowResize, allowProgressChange, allowTaskCreate, allowLinkCreate and
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 is between them. See
GanttInteractionConfig.
allowTaskCreate creates nothing on its own, because onTaskCreate must also be given. Without
it the button and the gesture are absent, and addTask() does nothing.
allowReorder defaults to false, not to !readOnly, so a chart that never sets it shows no
row grips, and the reorder keys do nothing. A task's own allowReorder wins, and a task's
readOnly: true blocks it. The chart's readOnly is not consulted. See
GanttInteractionConfig.
defaultScale is an initial value, not a controlled one. It is read once, when the chart is
constructed, so the first paint is already at that scale. Later changes to the prop are ignored,
onScaleChange does not fire for them, and nothing is persisted, so a remount starts from the
initial value again.
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 fires in both modes.
theme has no default. Omitted, it follows the host page's color-scheme; 'system' reads the
OS setting instead; 'light' and 'dark' hold everywhere, server rendering included. The
resolution table is in Theming.
visibleStart and visibleEnd are independent. Pinning one end also stops infiniteScroll from
extending the range on that side, and the other side still extends.
workingCalendar builds its calendar from workingWeekdays and holidays, the same two props
that drive showNonWorkingDays shading.
workingWeekdays and holidays are compared by identity, not by contents. A fresh array on
every render rebuilds the calendar on every render.
The task list has no column API. It shows task.name at a starting pane width of 220px, and
everything else about a task belongs in the detail panel. See
Task list and hierarchy.
GanttTaskMoveChange is what onTaskMove receives. It is exported from the package root and
its fields are described in Tree helpers, next to the moveTask function that
builds it.
GanttDependencyChange, GanttTaskDraft and GanttDateRange are exported from the package
root. Their fields are described in Dependencies,
Creating tasks and The timeline, next to the callback that
receives each.
Dayjs is a dayjs type, and ReactNode and React.MouseEvent are react types. None of the
three is re-exported from this package.
The chart does not render a toolbar or a scale picker. A host that wants one renders it, drives
it with setScale on the ref and updates it from onScaleChange. See
The timeline.
ReactGanttChart also takes a ref of type GanttHandle for scrolling, zooming, switching
scale and opening or closing the detail panel. It is not part of GanttProps. See
GanttHandle.