Configuration

Columns

The histogram sheet displays three columns by default:

Column layout (widths, order, visibility) can be saved and restored:

// Save current column layout
const layout = histogram.saveColumns();
localStorage.setItem('histogram-columns', JSON.stringify(layout));

// Restore column layout
const saved = localStorage.getItem('histogram-columns');
if (saved) {
  histogram.loadColumns(JSON.parse(saved));
}

Time Scale & Zoom

The histogram shares the same time axis system as other TimelineKit components. Zoom levels range from hours to years.

// Zoom in/out
histogram.zoomIn();   // returns false if at max zoom
histogram.zoomOut();  // returns false if at min zoom

// Fit view to show all allocations
histogram.zoomToFit();

// Auto zoom to fit when data is loaded
histogram.autoZoomToFit = true; // default

// Set project timeline bounds
histogram.projectTimeline = new DateRange(
  new Date('2026-01-01'),
  new Date('2026-12-31')
);

// Scroll to a specific date
histogram.scrollToDate(new Date('2026-06-01'));

// Scroll to project start
histogram.goToProjectStart();

// Scroll to a specific resource row
histogram.scrollToResource(resource);

Markers & Today Line

Markers are vertical lines drawn at specific dates on the chart. The today line is a built-in marker that highlights the current date.

// Toggle today line
histogram.showTodayLine = true; // default

// Add a custom marker
histogram.addMarker({
  date: new Date('2026-06-15'),
  label: 'Deadline',
  color: '#e05050',
  lineWidth: 1,
  lineStyle: 'dashed', // 'solid' | 'dashed' | 'dotted'
});

// Remove / clear markers
histogram.removeMarker(marker);
histogram.clearMarkers();

// Set all markers at once
histogram.markers = [marker1, marker2];

Threshold Line

The threshold line indicates the maximum capacity level for each resource. Bars extending above this line represent over-allocation. The threshold is derived from each resource's maxCapacity property.

// Toggle threshold line visibility
histogram.showThresholdLine = true; // default

// Customize threshold line appearance via theme
const theme = new LightHistogramTheme();
theme.histogram.thresholdLineColor = '#888888';
theme.histogram.thresholdLineWidth = 1;
theme.histogram.thresholdLineStyle = 'dashed'; // 'solid' | 'dashed' | 'dotted'
histogram.settings.theme = theme;

Custom Tooltips

By default, hovering over a resource row shows a tooltip with the date, total utilization, and a breakdown of individual allocations. You can replace this with a custom tooltip function.

// Custom tooltip function
histogram.barTooltip = ({ resource, date, utilization }) => {
  return {
    title: resource.name,
    lines: [
      { name: 'Date', value: date.toLocaleDateString() },
      { name: 'Load', value: Math.round(utilization) + '%' },
      { name: 'Status', value: utilization > 100 ? 'Over-allocated!' : 'OK' },
    ],
  };
};

// Return null to suppress the tooltip for specific cases
histogram.barTooltip = ({ utilization }) => {
  if (utilization === 0) return null; // no tooltip when idle
  return { title: 'Utilization', lines: [
    { name: 'Load', value: Math.round(utilization) + '%' },
  ]};
};

// Reset to default tooltip
histogram.barTooltip = null;

Tooltip Function Signature