Concepts
Understand the chart's parts and the task data behind them
If you are new to Gantt charts, start here to learn what the bars, rows, and connections mean. You can also go straight to the Quick start and return when you meet an unfamiliar term.
Parts of the chart
- Top header row: the visible span, bucketed one unit of the scale at a time.
- Tick row: how much time one tick covers is the scale, and labels thin out when the width runs short.
- Summary row: a task with children under
parentId, withhierarchyon. Its dates come from the children. - Lane row: two tasks sharing a
laneand not overlapping in time, packed onto one row. - Ordinary row: one task, one bar.
| Term | Meaning |
|---|---|
| Task | One item in your tasks array, with a name and start and end dates. |
| Bar | The horizontal shape that shows a task's dates. Dragging it edits the task. |
| Row | A horizontal space in the chart. It usually holds one task. |
| Task list | The optional pane to the left of the timeline, showing task names. |
| Timeline | The dated grid where the bars appear. |
| Scale | How much time the timeline shows in each division, from a detailed day view to a year view. |
| Detail panel | An optional panel for viewing information about a selected task. |
To change the date display, read The timeline. To show more task information, read Detail panel.
Tasks and your app
Your app passes task data to <ReactGanttChart>. When an edit is committed, the chart reports
the updated array through onTasksChange. Your app decides how to save it.
A draft is a proposed new task reported through onTaskCreate. The app supplies its identity
and adds it to the task array. See Creating tasks.
The Quick start shows the state connection. Task data explains the required fields, date format, and data validation responsibilities.
Project structure
Use a hierarchy to group tasks into phases and subtasks. A task's parentId identifies its
parent, while sequence sets display order. Enable hierarchy to use collapsible groups.
A summary row represents a parent task. Its dates and progress are calculated from its children; this calculation is called a roll-up. Dragging its bar moves the group together. See Task list and hierarchy.
A lane places tasks beside each other on a shared row. Tasks with overlapping dates need separate rows. A lane groups the display; it does not create a parent-child relationship. See Lanes.
Connections between tasks
A dependency connects two tasks. The predecessor is the task being depended on, and the successor is the task that depends on it.
For example, Build can have a finish-to-start (FS) dependency on Design: Build is expected to
start after Design finishes. The dependency is stored on Build, with Design's ID as targetId.
Drawing a connection does not automatically reschedule the tasks. See Dependencies for the four connection types and their behavior.
Working days
A working calendar defines working weekdays and holidays for the chart. It can move a drag
result off a non-working day when workingCalendar is enabled.
The timeline still shows calendar days, including weekends and holidays. See Working calendar for snapping behavior and The timeline for shading.
Ready to add the chart? Continue to Quick start.