Introduction

Use @jaeungkim/gantt-chart to build an editable project schedule or release roadmap in React. It provides the timeline and editing interactions; your app supplies the task data and saves changes.

What you can buildCopy Anchor Link

Users can move tasks, adjust dates and progress, and connect tasks with dependency arrows. Group work into project phases with hierarchy, or place multiple bars on a row with lanes.

The chart includes five timeline scales, working-day shading, optional working-calendar snapping, and light and dark themes. Rows and time cells are virtualized to limit how much is rendered at once. Keyboard editing supports common task operations, with documented accessibility gaps.

Try these features in the playground, or follow Quick start to add the chart to your app.

How it fits into your appCopy Anchor Link

Pass your tasks to the chart and receive edits through onTasksChange. The callback gives you the updated task array, which you can keep in React state. Events and saving shows how to connect this to your application.

The chart keeps temporary interaction state while it is mounted. It does not save data to a server or browser storage. Your app handles loading, saving, validation and any collaboration or undo workflow.

You also choose the controls around the chart. Use the ref API for a scale picker, a Today button or navigation to a task. Use the detail panel for editing task fields.

Is it a fit for your project?Copy Anchor Link

The package supports React 18 and 19 and includes TypeScript types. It is MIT licensed and can be used in commercial projects.

Consider these boundaries when planning an integration:

• Dependencies show relationships; moving a predecessor does not automatically reschedule successors. See Dependencies.
• Lanes group bars visually. Resource allocation, workload balancing and cost calculations are not included.
• There is no built-in PDF, image or spreadsheet export, or dedicated print layout.
• Date labels can be localized. Built-in interface text and announcements remain English, and RTL layout is not supported. See Locale and date formats and Keyboard and screen readers.

For data operations outside the chart, the package also exports tree and calendar helpers.

Where to go nextCopy Anchor Link

Start with Quick start. You can return to Concepts when you need a term explained. For questions or ways to help, visit Community and contributing.