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.

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:

<script>
  import { Gantt, ResourceLoad } from "@svar-ui/svelte-gantt";

  let api = $state();
</script>

<Gantt bind:this={api} {tasks} {links} {scales} {resources} {assignments} />
<ResourceLoad {api} />

Columns​

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

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

<ResourceLoad {api} {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} template={load => `${load.percent}%`} />

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

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

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.

<script>
  import { Gantt, ResourceLoad } from "@svar-ui/svelte-gantt";

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

  let api = $state();
</script>

<Gantt bind:this={api} {tasks} {links} {scales} {resources} {assignments} {calendar} />
<ResourceLoad {api} />

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:

<script>
  import { Gantt, ResourceLoad } from "@svar-ui/svelte-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 },
  };

  let api = $state();
</script>

<Gantt bind:this={api} {tasks} {links} {scales} {resources} {assignments} {calendar} />
<ResourceLoad {api} template={v => `${v.hours}h (${v.percent}%)`} />

Related articles: