Resource Histogram

A resource utilization component that shows workload distribution over time. Instantly spot over-allocated team members, balance capacity, and plan ahead.

Try Live Demo View Docs Examples

Features

Utilization Bars

Visualize resource workload over time with per-bucket utilization bars. Over-allocation is highlighted automatically.

Bar & Area Charts

Switch between bar chart and area chart display modes for different visualization styles.

Threshold Line

A capacity threshold line shows max capacity for each resource. Bars above the line are colored differently to signal over-allocation.

Aggregate View

Combine all resources into a single row to see total team utilization at a glance.

Gantt Integration

Bind to a Gantt Chart for live synchronization — resources, allocations, zoom, and scroll stay in sync automatically.

Custom Tooltips

Hover tooltips show allocation breakdowns. Fully customizable with a tooltip function.

Filtering

Filter resources by name, capacity, utilization level, or any custom criteria.

Export

Export the histogram to PNG, PDF, CSV, or Excel.

Quick start

Visualize resource utilization in a few lines of code.

App.tsx

import { useRef, useCallback } from 'react';
import { ResourceHistogram, ResourceHistogramRef,
         HistogramResource, HistogramAllocation } from '@timelinekit/react';
import '@timelinekit/core/styles';

function day(offset: number) {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  d.setHours(0, 0, 0, 0);
  return d;
}

export default function App() {
  const ref = useRef<ResourceHistogramRef>(null);

  const handleReady = useCallback(() => {
    const histogram = ref.current;
    if (!histogram) return;

    histogram.data.addResource(new HistogramResource('r1', 'Alice'));
    histogram.data.addResource(new HistogramResource('r2', 'Bob'));
    histogram.data.addResource(new HistogramResource('r3', 'Charlie'));

    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r1', 'Backend API', day(0), day(10), 100));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r1', 'Code Review', day(5), day(12), 50));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r2', 'UI Design', day(2), day(8), 80));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r3', 'Testing', day(4), day(14), 100));
    histogram.data.addAllocation(new HistogramAllocation(
      null, 'r3', 'Documentation', day(6), day(11), 60));

    histogram.zoomToFit();
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <ResourceHistogram ref={ref} onReady={handleReady} />
    </div>
  );
}

Start building with Resource Histogram

All features included. A license removes the watermark.

View Docs