Task Hierarchy

Gantt tasks can be arranged in a hierarchy.

You can create the hierarchy by specifying children for each task.

The parent tasks will be automatically treated as task groups (see Gantt task types).

The end-user can modify the hierarchy using drag and drop row moving.

JavaScript Example

<div id="gantt"></div>

<script>
  // create DayPilot.Gantt object, bind it to the placeholder div
  var gantt = DayPilot.Gantt("gantt");

  // configure
  gantt.tasks.list = [
    {
      id: "G1",
      text: "Group 1",
      children: [
        {
          start: "2027-10-01",
          end: "2027-10-03",
          id: "1",
          text: "Task 1"
        },
        {
          start: "2027-10-03",
          end: "2027-10-05",
          id: "2",
          text: "Task 2"
        }    
      ]
    }    
  ];

  // initialize and render the Gantt chart
  gantt.init();
</script>

Expand and Collapse Animation

Task group animation is enabled by default. In Pro since version 2026.4.7077, set treeAnimation: "Auto" to respect the system’s reduced-motion preference:

gantt.update({
  treeAnimation: "Auto",
  treeAnimationDuration: 350,
  treeAnimationEasing: "ease-in-out"
});

Use treeAnimation: false to turn the animation off. treeAnimationDuration defaults to "Auto", which chooses a suitable duration for each group. Set a nonnegative number of milliseconds for consistent timing, or 0 for an immediate change.

Use treeAnimationEasing to change how the animation speeds up and slows down. The default is "standard"; see the property reference for supported easing names and custom cubic-bezier() values.