19 Sep 20171 minute to read

Resources are represented by staff, equipment and materials etc. In Gantt control you can show /allocate the resources (human resources) for each task. The following steps explain how to configure Gantt with Resources

Step 1: Create a collection of JSON object, that contains id and name of the resource and assign it to resources property.

Step 2:  Then, specify the field name for id and name of the resource in the resource collection to resourceIdMapping and resourceNameMapping properties. 

Step 3: The name of the field, which contains the actual resources assigned for a particular task in the dataSource is specified using resourceInfoMapping.

  • <ej-gantt
        resourceInfoMapping= "resourceId"
        resourceNameMapping= "resourceName"
        resourceIdMapping= "resourceId"
        [resources]= projectResources
        showResourceNames= true>
  • import { Component } from '@angular/core';
      selector: 'ej-app',
        templateUrl: 'app/app.component.html',
    export class AppComponent {
       public projectResources:any;
       constructor() {
            resourceId: 1,
            resourceName: "Project Manager"
        }, {
            resourceId: 2,
            resourceName: "Software Analyst"
        }, {
            resourceId: 3,
            resourceName: "Developer"
        }, {
            resourceId: 4,
            resourceName: "Testing Engineer"

    The following screenshot shows Gantt control with Resources.

    You can find the online demo sample for allocating resources in Gantt here