Gantt Chart

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "taskHeaders": [
    "Task ID",
    "Task",
    "Start",
    "End (Exclusive)",
    "Duration (Days)"
  ],
  "tasks": [
    {
      "id": "T1",
      "label": "Requirements",
      "start": "2025-01-06",
      "end": "2025-01-09"
    },
    {
      "id": "T2",
      "label": "Design",
      "start": "2025-01-08",
      "end": "2025-01-13"
    },
    {
      "id": "T3",
      "label": "Build",
      "start": "2025-01-13",
      "end": "2025-01-20"
    },
    {
      "id": "T4",
      "label": "Review",
      "start": "2025-01-17",
      "end": "2025-01-22"
    },
    {
      "id": "T5",
      "label": "Release",
      "start": "2025-01-22",
      "end": "2025-01-23"
    }
  ],
  "datasets": []
};

function createConfig(chartData) {
    const rows = chartData.tasks, headers = chartData.taskHeaders, day = 86400000;
    const utc = (date) => Date.parse(`${date}T00:00:00.000Z`);
    const starts = rows.map(row => utc(row.start)), ends = rows.map(row => utc(row.end));
    const minimum = Math.min(...starts), maximum = Math.max(...ends);
    const step = Math.max(1, Math.ceil((maximum - minimum) / day / 4)) * day;
    const ticks = Array.from({ length: Math.floor((maximum - minimum) / step) + 1 }, (_, index) => minimum + index * step);
    const dateLabel = (value) => new Date(value).toISOString().slice(0, 10);
    const label = (index) => `${rows[index].label} (${rows[index].id})`;
    const shortLabel = (index) => label(index).length > 22 ? label(index).slice(0, 21) + '…' : label(index);
    return {
        type: 'bar', data: { labels: rows.map((_, index) => label(index)), datasets: [{ label: 'Task Interval', data: rows.map((_, index) => [starts[index], ends[index]]), backgroundColor: '#3b82f6', categoryPercentage: 0.6, barPercentage: 1, maxBarThickness: 32 }] },
        options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false,
            scales: {
                x: { type: 'linear', min: minimum, max: maximum, afterBuildTicks: scale => { scale.ticks = ticks.map(value => ({ value })); }, ticks: { callback: value => dateLabel(Number(value)), maxRotation: 45 }, title: { display: true, text: 'Calendar Date (UTC)' } },
                y: { grid: { display: false }, ticks: { autoSkip: true, maxTicksLimit: 12, callback: value => shortLabel(Number(value)) } },
            },
            plugins: { legend: { display: false }, title: { display: true, text: 'End Date Is Exclusive' }, tooltip: { callbacks: {
                        title: items => label(items[0].dataIndex),
                        label: item => { const i = item.dataIndex; return [`${headers[2]}: ${rows[i].start}`, `${headers[3]}: ${rows[i].end}`, `${headers[4]}: ${(ends[i] - starts[i]) / day}`]; },
                    } } },
        },
    };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>