Skip to main content

Resource load

PRO

The functionality is available in PRO Edition only

The ResourceLoad component renders a time grid alongside the Gantt chart. Each row represents a resource; each column a time period defined by the Gantt scale. Cells show the hours allocated in that period and are color-coded by load (≤ 100%) and overloaded (> 100%).

The Gantt chart and the resource grid share the same date range, scale, and highlightTime settings, so weekends and holidays are tinted consistently across both.

Rows also support native dragging via draggableRows, so users can assign a resource by dragging it out of the workload grid onto a task. Refer to Drag from the resource load view.

Basic setup​

Mount ResourceLoad next to your Gantt and pass the same api reference to both. The two components stay in sync through the shared API:

import { useRef } from "react";
import { Gantt, ResourceLoad } from "@svar/react-gantt";

function App() {
  const api = useRef(null);

  return (
    <>
      <Gantt ref={api} tasks={tasks} links={links} scales={scales} resources={resources} assignments={assignments} />
      <ResourceLoad api={api.current} />
    </>
  );
}

Columns​

By default ResourceLoad shows the Resources name column, Hours total column, and Capacity column. Pass a custom columns array to override placement, widths, or add extra columns:

const columns = [
  { id: "name", header: "Team member", flexgrow: 1, sort: true, resize: true },
  { id: "role", header: "Role", width: 120 },
  { id: "total", header: "Total h", width: 80, align: "center", getter: row => row.$total },
];

<ResourceLoad api={api.current} columns={columns} />

For the full list of column options, see ResourceLoad component.

Cell display​

Each cell shows allocated hours by default (e.g., 8h). Pass the template function to change the format:

{/* Show percent instead of hours */}
<ResourceLoad api={api.current} template={load => `${load.percent}%`} />

{/* Show both */}
<ResourceLoad api={api.current} template={load => `${load.hours}h (${load.percent}%)`} />

For the full template and load object description, see ResourceLoad component.

Display mode​

ResourceLoad supports two display modes that can be set via the mode prop:

  • "utilization" (default) — shows allocated hours or percent as numbers in cells, color-coded by load

Resource load

  • "histogram" — shows a bar per cell with a capacity line, so overload is visible at a glance

Resource load

<ResourceLoad api={api.current} mode="histogram" />

Configure bar clipping and the capacity line with the histogram prop:

<ResourceLoad
  api={api.current}
  mode="histogram"
  histogram={{
    overloadHeadroom: 1.5,
    capacityLine: false,
  }}
/>
  • overloadHeadroom multiplies the cell's nominal capacity (working hours per day × days in the cell) to set the upper bound of the bar scale — the point at which a bar is clipped. The default 1.25 clips at 125% of nominal capacity. If nominal capacity is 0, the upper bound falls back to the capacity line value instead.
  • capacityLine set to false hides the capacity line; it's shown by default.

Hovering a bar shows a tooltip reading "{name}: {hours}h / {capacity}h" by default. For a custom tooltip, see Add tooltips in the resource load view.

Resource load with calendars​

By default ResourceLoad assumes 8 working hours per day. Pass the calendar prop to Gantt to define the actual working schedule. ResourceLoad uses it to calculate load hours and percentages correctly.

import { useRef } from "react";
import { Gantt, ResourceLoad } from "@svar/react-gantt";

const calendar = {
  weekHours: {
    monday: 8,
    tuesday: 8,
    wednesday: 8,
    thursday: 8,
    friday: 4,
    saturday: 0,
    sunday: 0,
  },
};

function App() {
  const api = useRef(null);

  return (
    <>
      <Gantt ref={api} tasks={tasks} links={links} scales={scales} resources={resources} assignments={assignments} calendar={calendar} />
      <ResourceLoad api={api.current} />
    </>
  );
}

With a 4 h Friday, a resource assigned to a full-day task on Friday shows { percent: 100, hours: 4 }, fully loaded at 4 h, not 8 h.

The same calendar setup works with hierarchical resources. To organize resources into teams, set the parent field on each resource. ResourceLoad renders parent rows as collapsible group headers with aggregated load values:

import { useRef } from "react";
import { Gantt, ResourceLoad } from "@svar/react-gantt";

const resources = [
  { id: "dev", name: "Developers team", open: true },
  { id: "r1", name: "Robert Williams", role: "Developer", color: "#5C6BC0", parent: "dev" },
  { id: "r2", name: "Abram Herwitz",   role: "Developer", color: "#7E57C2", parent: "dev" },
  { id: "qa", name: "QA Team", open: true },
  { id: "r3", name: "James Wilson", role: "QA Engineer", color: "#FF9800", parent: "qa" },
  { id: "r4", name: "Emma Davis",   role: "QA Lead",     color: "#9C27B0", parent: "qa" },
];

const calendar = {
  weekHours: { monday: 8, tuesday: 8, wednesday: 8, thursday: 8, friday: 8, saturday: 0, sunday: 0 },
};

function App() {
  const api = useRef(null);

  return (
    <>
      <Gantt ref={api} tasks={tasks} links={links} scales={scales} resources={resources} assignments={assignments} calendar={calendar} />
      <ResourceLoad api={api.current} template={v => `${v.hours}h (${v.percent}%)`} />
    </>
  );
}

Tasks excluded from resource load​

Inactive tasks are excluded from resource load calculation. Their resource assignments are kept, but they add no hours to the load.

Related samples:

Related articles: