Data
Resources
Resources represent the entities whose utilization is being tracked — people, teams, or equipment. Each resource is displayed as a row in the histogram.
Resource Properties
| id: string | Unique identifier (read-only). Auto-generated if not provided. |
| name: string | Display name of the resource. |
| maxCapacity: number | Maximum capacity in percent. 100 = 1 FTE, 200 = 2 FTE. Default: 100. |
| filtered: boolean | Whether this resource is excluded by the active filter (read-only). |
Adding & Removing Resources
// Create and add a resource
const r = new HistogramResource('r1', 'Alice');
r.maxCapacity = 100;
histogram.data.addResource(r);
// Factory method (auto-generated ID)
const r2 = histogram.data.createResource();
r2.name = 'Bob';
r2.maxCapacity = 150; // 1.5 FTE
histogram.data.addResource(r2);
// Access resources
const first = histogram.data.getResource(0);
const byId = histogram.data.getResourceById('r1');
console.log(histogram.data.resourcesLength); // 2
// Remove
histogram.data.removeResource(r);
histogram.data.removeResourceById('r1');
// Replace all resources at once
histogram.data.assignResources([r1, r2, r3]);
// Clear everything
histogram.data.clearAll();Serialization
Resources can be serialized to and from plain objects using toAny() and HistogramResource.fromAny(obj).
const obj = resource.toAny();
// { id: 'r1', name: 'Alice', maxCapacity: 150 }
const restored = HistogramResource.fromAny(obj);Allocations
Allocations represent time blocks during which a resource is assigned to a task or activity. Each allocation has a time range and a capacity percentage. Multiple overlapping allocations are summed to compute total utilization.
Allocation Properties
| id: string | Unique identifier (read-only). Auto-generated if not provided. |
| resourceId: string | ID of the resource this allocation belongs to. |
| name: string | Display name (typically the task name). |
| startTime: Date | Start date/time of the allocation. |
| endTime: Date | End date/time of the allocation. |
| capacity: number | Allocation capacity in percent. 100 = full-time, 50 = half-time. |
Adding & Removing Allocations
// Create and add an allocation
const alloc = new HistogramAllocation(
null, // auto-generate ID
'r1', // resourceId
'Backend', // name
new Date('2026-03-01'),
new Date('2026-03-15'),
100 // capacity: 100%
);
histogram.data.addAllocation(alloc);
// Factory method
const alloc2 = histogram.data.createAllocation(
'r1', new Date('2026-03-10'), new Date('2026-03-20')
);
alloc2.name = 'Code Review';
alloc2.capacity = 50;
histogram.data.addAllocation(alloc2);
// Query allocations
const byId = histogram.data.getAllocationById('a1');
const forResource = histogram.data.getAllocationsForResource('r1');
console.log(histogram.data.allocationsLength);
// Remove
histogram.data.removeAllocation(alloc);
histogram.data.removeAllocationById('a1');
// Replace all allocations at once
histogram.data.assignAllocations([alloc1, alloc2, alloc3]);Utilization
The histogram computes utilization per time bucket by summing all overlapping allocations. Partial overlaps are weighted proportionally. A value of 100 means the resource is fully allocated; values above maxCapacity indicate over-allocation and are shown in red.
// Get utilization for a specific time bucket
const util = histogram.data.getUtilization(
'r1',
new Date('2026-03-05'),
new Date('2026-03-06')
); // e.g. 150 (= 150%)
// Get peak utilization across all time for a resource
const peak = histogram.data.getPeakUtilization('r1'); // e.g. 150
// Aggregate utilization across all visible resources
const aggr = histogram.data.getAggregateUtilization(
new Date('2026-03-05'),
new Date('2026-03-06')
);
// Total max capacity across all visible resources
const totalCap = histogram.data.aggregateMaxCapacity;
// Time range of all allocations
const earliest = histogram.data.minStartTime; // Date | null
const latest = histogram.data.maxEndTime; // Date | nullGantt Chart Binding
The histogram can be bound to a Gantt Chart for automatic, live data synchronization. When bound, the histogram reflects the Gantt's resources, task-resource assignments, zoom level, and scroll position in real time. Changes in the Gantt are automatically propagated to the histogram.
// Bind to a Gantt Chart instance
histogram.bindToGantt(gantt);
// The histogram now automatically shows:
// - Resources from the Gantt
// - Allocations derived from task-resource assignments
// - Synchronized zoom level and horizontal scroll
// - Synchronized project timeline bounds
// Disconnect when no longer needed
histogram.unbindFromGantt();
// Histogram retains its current data but stops syncingWhen bound, you do not need to manually add resources or allocations — they are automatically derived from the Gantt's task data. Each task-resource assignment with a capacity value becomes a histogram allocation.