Task data

You can load tasks from an API, a local file, or React state. Map each record to Task, then pass the array to the chart.

Start with one taskCopy Anchor Link

Each task needs an id, a name, two dates, a parent id, and a sequence. A standalone task uses parentId: null.

import type { Task } from '@jaeungkim/gantt-chart';

const tasks: Task[] = [
  {
    id: 'design',
    name: 'Design',
    startDate: '2026-09-01',
    endDate: '2026-09-08',
    parentId: null,
    sequence: '1',
    progress: 40,
  },
];

progress is optional. Use a number from 0 to 100 to show a progress fill, or omit it to leave the bar unfilled. Numeric strings such as "40" are not converted.

Keep ids unique and stable across edits. The chart uses them to find tasks, resolve dependencies, and build the hierarchy. The full field definitions are in Task.

Choose dates deliberatelyCopy Anchor Link

For day-based plans, use YYYY-MM-DD. The chart reads dates in UTC, so the named day stays the same for every viewer.

For time-based plans, use ISO strings with an explicit offset:

Dates without an offset are also read as UTC. Edits return full UTC ISO strings, so 2026-09-01 may come back as 2026-09-01T00:00:00.000Z.

The chart does not offer a local-time-zone mode. Locale and date formats changes labels, not the time zone used for layout.

Set order and structureCopy Anchor Link

sequence controls row order. It compares dot-separated numbers, so 1.2 comes before 1.10. Use 1, 2, and 3 for a flat list.

For nested work, set a child's parentId and give it a sequence such as 1.1. Enable hierarchy to turn those links into a tree with summary rows and collapse controls. See Task list and hierarchy.

The chart does not reorder children beneath parents automatically. Keep sequence consistent with the parent links. Row reordering updates these fields when users move rows.

Keep edits in stateCopy Anchor Link

Pass the complete array from onTasksChange back into tasks:

const [tasks, setTasks] = useState<Task[]>(initialTasks);

<ReactGanttChart tasks={tasks} onTasksChange={setTasks} />

Preserve optional fields such as dependencies and progress when saving. If your API needs another date format or field shape, convert a separate payload for that API. See Events for connecting changes to application state.

When your app edits tasks directly, create a new array and new objects for changed tasks. Mutating the existing array in place does not trigger synchronization.

The chart also compares incoming data with the previous incoming data using JSON serialization. Re-passing the previous value is not a reliable way to reject a chart edit: an unchanged serialized value does not replace the chart's internal data. Property order and extra fields can affect that comparison.

Add more detailCopy Anchor Link

Use optional fields as your project needs them:

• Dependencies connect tasks that depend on each other.
• Lanes let tasks share rows.
• Styling covers task colors and CSS classes.
• Editing tasks covers per-task permissions and date bounds.

To create new tasks, your app supplies their ids, names, and order after receiving a draft. See Creating tasks.

Validate external dataCopy Anchor Link

Task gives TypeScript a contract; it is not runtime validation. Validate records received from APIs or user imports before passing them to the chart.

Check required fields, unique ids, valid date ranges, and parent links. In particular, a missing sequence can prevent rendering. Invalid dates and duplicate ids may produce incorrect bars or relationships without reporting an error.

Pass Task[] as input. TaskTransformed contains additional render data and is an output type for callbacks and renderers. See Task types.