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.

Source code
TypeScript ts 
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);
}
Vue vue 
<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>
React tsx 
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} />;
}
Angular ts 
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';

@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">
      <div style="display: flex; gap: 8px">
        <button type="button" (click)="setLevelingMode('warn')">Warn</button>
        <button type="button" (click)="setLevelingMode('auto')">Auto level</button>
      </div>
      <div style="display: flex; gap: 8px">
        <button type="button" (click)="setResourcePlanningEnabled(false)">Task view</button>
        <button type="button" (click)="setResourcePlanningEnabled(true)">Resource load</button>
      </div>
      <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',
  },
};

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'],
};