Live Demo — yFiles in Action
30–45 min | Online | No install required
For Developers, Product Mangers & Executives
- Interactive graph visualization in real time
- Integration example
- Live Q&A and next step recommendations
30–45 minutes | 1:1 or team session | Online (Zoom / Teams)
No install required | We show live code
Book a free live demo
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
duration.
-
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.