Grouping tasks in a hierarchy#

Split bigger tasks up in subtasks or group resources together if they belong to the same parent task. Use the parent property of a data point (i.e. the sub task) which value points to the id of the parent task. The duration of the parent task will then span all sub tasks.

Example of defining subtasks and grouping them with one parent task.

Gantt charts have a vertical axis of type treegrid by default. Notice in the above example how that results automatically in collapsable subtasks. Set the parent task's data point with collapsed: true to render the task collapsed from the start.

Group tasks vertically#

For grouping tasks in a Gantt chart on horizontal tracks, use a vertical category axis. This type of Gantt chart is often used to visualize resource allocation or availability schedules.

Code example for setting a category axis

yAxis: {
categories: ['Resource 1', 'Resource 2', 'Resource 3']

See example below for grouping tasks vertically in horizontal tracks