Skip to content
RevoGrid [Pro]

Resource Planning View

The Resource Planning View switches the Gantt chart from a task-centric WBS to a resource-centric view. This allows managers to visualize daily or weekly load, capacity thresholds, and over-allocation hotspots.

Resource names include a compact avatar for faster scanning. Gantt derives a colored initials avatar from the resource name by default; supply avatarUrl on a resource to render its profile image instead.

Source code
TypeScriptts
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
import { loadAdvancedGanttDemo } from './GanttAdvancedVanillaDemo';

export function load(parentSelector: string) {
  return loadAdvancedGanttDemo(parentSelector, GANTT_RESOURCE_PLANNING_DEMO);
}
Vuevue
<template>
  <GanttAdvancedDemo :demo="GANTT_RESOURCE_PLANNING_DEMO" />
</template>

<script setup lang="ts">
import GanttAdvancedDemo from './GanttAdvancedDemo.vue';
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
</script>
Reacttsx
import React from 'react';
import GanttAdvancedDemo from './GanttAdvancedReactDemo';
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';

export default function GanttResourcePlanning() {
  return <GanttAdvancedDemo demo={GANTT_RESOURCE_PLANNING_DEMO} />;
}
Angularts
import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { GanttAdvancedAngularBase } from './GanttAdvancedAngularBase';
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
import { defineGanttResourcePlanningToolbarElement } from './gantt-resource-planning-toolbar';

defineGanttResourcePlanningToolbarElement();

@Component({
  selector: 'gantt-resource-planning-grid',
  standalone: true,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
  imports: [RevoGrid],
  template: `
    <div style="height: 560px; display: flex; flex-direction: column; gap: 8px">
      <gantt-resource-planning-toolbar [options]="resourcePlanningToolbarOptions" (gantt-resource-planning-toolbar-options-change)="setResourcePlanningToolbarOptions($any($event).detail)"></gantt-resource-planning-toolbar>
      <revo-grid style="height: 100%" [theme]="theme" [hideAttribution]="true" [plugins]="plugins" [source]="tasks" [columns]="columns" [gantt]="ganttConfig" [ganttDependencies]="dependencies" [ganttCalendars]="calendars" [ganttResources]="resources" [ganttAssignments]="assignments"></revo-grid>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class GanttResourcePlanningGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_RESOURCE_PLANNING_DEMO;
}

Enabling the Planning View

Section titled “Enabling the Planning View”

Use gantt.resourcePlanning to toggle the view and configure its behavior:

grid.gantt = {
  resourcePlanning: {
    enabled: true,
    visibleResourceIds: ['alex', 'nina', 'ravi'],
    loadGranularity: 'day',
    capacityDisplay: 'line',
    overAllocationDisplay: 'highlight',
  },
};
grid.ganttResources = [{
  id: 'alex',
  name: 'Alex Morgan',
  avatarUrl: '/images/team/alex-morgan.png',
  role: 'Lead Engineer',
  calendarId: 'standard',
  allocationCapacity: 100,
  hourlyCost: 120,
}];

Configuration Options

Section titled “Configuration Options”
OptionDescription
enabledToggle between task rows and resource load rows.
visibleResourceIdsArray of resource IDs to display in the planning view.
loadGranularity'day' or 'week'. The time bucket for load calculation.
capacityDisplay'line' or 'none'. Renders a capacity threshold on load bars.
overAllocationDisplay'highlight' or 'none'. Marks buckets exceeding capacity.

Resource Filtering

Section titled “Resource Filtering”

When you are in the normal task view, you can use resourceFilterIds to filter tasks assigned to specific resources while keeping ancestor summary tasks visible. This provides context-aware filtering within the project structure.

grid.gantt = {
  resourceFilterIds: ['alex'],
};