Example of resource-allocation-functional in React Gantt

/
/
Resource Allocation

This sample demonstrates resource allocation in the Gantt Chart by assigning resources to project tasks and visualizing their workload across the project schedule.

More Details...

Loading....
Description

This example demonstrates how to assign resources to tasks and visualize resource allocation in the Gantt Chart. Resource information is mapped using the resourceFields: property and displayed through task labels and resource columns.

The work field represents the total effort required to complete a task. When work values and resource assignments are defined, task duration and scheduling values are automatically calculated based on the configured workUnit.

Resources are mapped using the following fields:

  • id: To map resource ID
  • name: To map resource name
  • unit: To map resource unit

This sample uses the FixedWork task type, where the work value remains constant while duration and resource units are recalculated during editing. The Gantt Chart also supports the following task types:

  • FixedDuration: Duration remains constant while work and resource units are recalculated.
  • FixedWork: Work remains constant while duration and resource units are recalculated.
  • FixedUnit: Resource units remain constant while work and duration are recalculated.

Gantt component features are segregated into individual feature-wise modules. To use a selection, markers, edit and toolbar features, we need to inject the Selection, DayMarkers, Toolbar and Edit into the Inject Services section.


More information on the Essential® React Gantt Chart can be found in this resources documentation section.


Looking for the full React Gantt Chart component overview, features, pricing, and documentation? Visit the React Gantt Chart page.