Features

Display Modes

The histogram supports two display modes for visualizing utilization data:

• Bar (default) — discrete bars per time bucket. Each bar shows the total utilization for that period. Over-allocation is shown as a red segment above the threshold line.
• Area — continuous filled area chart. The area is filled with the normal color below the threshold and the over-allocated color above it, with a line drawn on top.

// Switch display mode
histogram.displayMode = 'bar';  // default
histogram.displayMode = 'area';

View Modes

Choose between per-resource or aggregate visualization:

• Resource (default) — each resource has its own row with individual utilization bars. The threshold line corresponds to each resource's maxCapacity.
• Aggregate — all resources are combined into a single row showing total utilization. The threshold represents the sum of all visible resources' capacities. The chart height adapts to match the combined resource rows.

// Switch view mode
histogram.viewMode = 'resource';   // default — one row per resource
histogram.viewMode = 'aggregate';  // single combined row

Display mode and view mode can be combined freely — for example, area + aggregate gives a single smooth area chart showing total team utilization.

Export

Export the histogram to multiple formats. PDF and Excel require optional dependencies.

// Export to PNG image
const imageBlob = await histogram.exportToImage();

// Export to CSV
const csv = histogram.exportToCsv({
  delimiter: ',',        // ',' | ';' | '\t'
  includeHeaders: true,  // default
});

// Export to PDF (requires jspdf)
const pdfBlob = await histogram.exportToPdf({
  orientation: 'landscape', // 'portrait' | 'landscape'
  pageSize: 'a4',           // 'a4' | 'letter' | 'legal'
});

// Export to Excel (requires exceljs)
const xlsxBlob = await histogram.exportToExcel({
  allocationsSheetName: 'Allocations', // default
  includeResourcesSheet: true,         // default
  includeFormatting: true,             // default
});

CSV and Excel exports include allocation data (resource name, allocation name, start/end dates, capacity). The Excel export optionally includes a separate resources sheet with resource names and max capacities.

Serialization

Save and restore the complete histogram state as JSON. This includes all resources, allocations, project timeline, markers, display mode, and view mode.

// Save state to JSON string
const json = histogram.save();
localStorage.setItem('histogram-state', json);

// Load state from JSON string
const saved = localStorage.getItem('histogram-state');
if (saved) {
  histogram.load(saved);
}

The serialized JSON includes: resources, allocations, projectTimeline, showTodayLine, showThresholdLine, markers, displayMode, and viewMode. Default values (displayMode: 'bar', viewMode: 'resource') are omitted to reduce payload size.