Resources with Allocation and Task Mapping in JavaScript Gantt Chart
Resources in the JavaScript Gantt Chart control represent people, equipment, or materials allocated to tasks, and they can be visualized in taskbars and labels for clear utilization tracking. Define a resource collection in the resources property, map its fields with resourceFields, and assign the resources to each task through taskFields.resourceInfo. This mapping enables resource names to appear in columns or labels with labelSettings, highlights workloads and overallocation, and supports taskbar customization through the queryTaskbarInfo event. Resources also include ARIA labels for accessibility and adapt to responsive layouts, although narrow screens may truncate names when multiple resources are assigned. By default, resources allocate 100% unit if the unit is not specified.
Configure resource collection
The resource collection defines available resources as JSON objects with an ID, name, unit, and group, and these fields are mapped through resourceFields. Each task in the data source can then reference the matching resources by using taskFields.resourceInfo:
- id: Maps to a unique identifier for task assignment.
- name: Maps to the resource name displayed in labels or columns.
- unit: Maps to the work capacity percentage (0-100%) per day.
- group: Maps to categories for grouping resources.
The following code demonstrates resource collection setup:
This configuration maps resources for assignment and display.
Assign resources to tasks
Resources are assigned to tasks by declaring a field in the task data source, such as resources, and populating it with the matching resource IDs or resource objects. This field is mapped through taskFields.resourceInfo so the Gantt Chart control can group tasks under the appropriate resource nodes. Assignments can be added or edited dynamically via cell or dialog editing, triggered by double-clicking.
Single resource assignment:
Assign a single resource without unit for default 100% allocation.
{
TaskID: 2,
TaskName: 'Identify site location',
StartDate: new Date('04/02/2019'),
Duration: 0,
Progress: 50,
resources: [1]
}Multiple resources with custom units:
Assign multiple resources with specific units.
{
TaskID: 2,
TaskName: 'Identify site location',
StartDate: new Date('03/29/2019'),
Duration: 2,
Progress: 30,
resources: [{ resourceId: 1, unit: 70 }, 6]
}Units from the resource collection apply unless overridden at the task level.
The following example shows resource assignment:
Manage resource assignments
Add or remove resources via cell or dialog editing. Cell editing modifies assignments by double-clicking the resource cell, while dialog editing uses the resource tab in the edit dialog.
Alt text: Resource cell editing in the Gantt grid for assignment modifications.
Alt text: Resource dialog editing tab for multiple allocations and units.
Customize resource styling
Customize resource display using column templates for the resource column and the queryTaskbarInfo event for taskbar styling based on assigned resources.
The following example demonstrates custom resource styling:
This configuration applies background colors to resource columns and taskbars, with the queryTaskbarInfo event modifying taskbar properties dynamically.