Documentation

Add an interactive project timeline to your React app with @jaeungkim/gantt-chart. Start with a working example, then add the features your project needs.

Start hereCopy Anchor Link

1. Quick start: Install the package and render an editable chart.
2. Task data: Map your application's data to tasks.
3. Events and saving: Keep edits in state and save them through your API.

Want to try it first? Open the playground. Read Introduction for the package's scope and Concepts when a term is unfamiliar.

Build your workflowCopy Anchor Link

Each guide covers one feature.

• Task list and hierarchy: Group tasks into project phases.
• Lanes: Put multiple tasks on one row.
• Editing tasks: Change dates and progress.
• Creating tasks: Let users add tasks.
• Reordering rows: Change row order or move tasks between phases.
• Dependencies: Connect tasks.
• Working calendar: Skip weekends and holidays when dragging.
• Detail panel: Add a task editor beside the chart.
• Chart controls: Add zoom and navigation controls.
• Theming and Styling: Match your app's design.
• Locale and date formats: Format dates for another language.

Look up an APICopy Anchor Link

Use GanttProps for component props, Task for task fields, and GanttHandle for methods called through a ref.

Get involvedCopy Anchor Link

The project is open source under the MIT license. Questions, bug reports, examples and documentation improvements are welcome. See Community and contributing for where to start.