Gantt Chart Demo
The Gantt Chart demo shows how to create a Gantt component from JSON data.
The data consists of tasks which define the horizontal lanes and activities, each of which
is assigned to a task.
An activity has a start and an end date, and optionally a lead and/or a follow-up time.
Also, an activity can optionally depend on other activities.
The activity duration is rendered as a solid area. The lead and follow-up times are
rendered with a hatch pattern.
The activity dependencies are modeled as edges between the activity nodes.
Things to Try
- Scroll the tasks using the mouse wheel.
- Scroll the timeline horizontally using shift + mouse wheel.
- Hover over an activity to highlight its dependencies.
- Hover over a dependency edge to highlight its source and target.
- Select an activity to display the activity information.
Grab and drag an activity to change the start and end time, or to assign an activity to
a different task.
Grab the left or right side of the solid area of an activity and drag to change the
Select an activity and drag one of the round handles on the left or right to change the
lead or follow-up time.
- Select an activity and press 'F2' to change its name.
Drag an activity so it overlaps with other activities in the same task lane. The
activities are placed below each other so they don't overlap.
- Drag the mouse on an empty part of a task lane to create a new activity.
- Shift-drag from a node to create a new dependency edge.