Gantt Chart Playground
Welcome to your interactive Gantt chart!
- Click the
+button to add a new task. - To create a subtask, select a task and click
+again, or drag one task onto another to make it a child. - Drag entire tasks to adjust their position in the timeline.
- Resize tasks by dragging the grips at their edges, or fine-tune the duration using the numeric stepper next to the task name.
- Drag the triangle on a task bar to set its progress, or click the pie chart on the left to mark it as 100%.
- Click on the x-axis to add or remove markers.
- Click and drag the circles on tasks to draw connecting lines. Click a line to delete it.
- Use the color picker to set a custom color for any task.
That’s it—have fun planning!
Build this chart with AI
The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.
Create an interactive Gantt chart playground using am5gantt.Gantt with editable: true. Include sample project data with 4-5 tasks showing varied progress. The chart should be fully interactive (Gantt handles editing, drag, resize, dependencies by default). Apply smooth animations. Use amCharts 5 library.
Demo source