Quick start

Start with three tasks and a chart you can edit right away. This example keeps changes in React state, so you can try moving tasks before connecting your own data source.

Install the packageCopy Anchor Link

Use an existing React 18 or 19 app with react and react-dom installed.

pnpm add @jaeungkim/gantt-chart

Using another package manager? Run npm install @jaeungkim/gantt-chart or yarn add @jaeungkim/gantt-chart instead.

Add the chartCopy Anchor Link

Create ProjectChart.tsx with the example below, then render <ProjectChart /> in your app. The stylesheet import is required for the chart's layout and appearance.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

const initialTasks: Task[] = [
  {
    id: 'design',
    name: 'Design',
    startDate: '2026-03-02',
    endDate: '2026-03-06',
    parentId: null,
    sequence: '1',
    progress: 100,
  },
  {
    id: 'build',
    name: 'Build',
    startDate: '2026-03-09',
    endDate: '2026-03-20',
    parentId: null,
    sequence: '2',
    progress: 40,
    dependencies: [{ targetId: 'design', type: 'FS' }],
  },
  {
    id: 'review',
    name: 'Review',
    startDate: '2026-03-23',
    endDate: '2026-03-27',
    parentId: null,
    sequence: '3',
    progress: 0,
  },
];

export function ProjectChart() {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
      showTaskList
      height={420}
    />
  );
}

The left pane shows the task names. Each bar shows a task's dates, and the arrow connects Design to Build. showTaskList enables that pane; height gives the chart room to render.

The example includes all six required task fields. parentId: null makes each task a top-level task, and sequence sets their order. See Task data when mapping your own data.

Run the app to check the result. Three rows appear, with Design, Build and Review in the left pane, their bars on a dated grid, and an arrow from Design to Build. If the chart renders as unstyled text, check the stylesheet import first.

Try editingCopy Anchor Link

1. Drag the Build bar sideways to move its dates.
2. Drag either end of the bar to change its duration.
3. Drag the progress handle inside Build to change its completion percentage.
4. Hover over Build, then drag its right connector dot onto Review to add a dependency.

These interactions are enabled in the example. See Editing tasks for editing controls and Dependencies for connection types and scheduling behavior.

Keep the changesCopy Anchor Link

onTasksChange={setTasks} puts the complete updated tasks array into React state after an edit is committed. Passing that state back as tasks keeps the chart and your app in sync.

This example keeps edits only while the component stays mounted. To retain them across reloads, connect your app's storage or API and handle saving errors there. The chart does not save data for you. See Events for the callback flow.

Build on the exampleCopy Anchor Link

Pick the guide for what your project needs next.

• Task data: Load your own tasks and understand how dates are read.
• Task list and hierarchy: Group tasks into project phases.
• Creating tasks: Add new tasks.
• Working calendar: Account for weekends and holidays when dragging.
• Theming: Match your app's colors.
• Imperative API: Add a scale picker or a Today button.
• GanttProps: Look up a component option.

For a live example with more options, open the playground.