ApexCharts Gantt Timeline with Range Bars — Free Project Plan Snippet

<div class="agt-wrap">
  <div class="agt-card">
    <div class="agt-head">
      <div>
        <div class="agt-title">Website Relaunch — Q4 Plan</div>
        <div class="agt-sub">Bars are coloured by owner team · the dashed line is today</div>
      </div>
      <button class="agt-btn" id="agtSlip" type="button">Slip design by 1 week</button>
    </div>
    <div id="agtChart"></div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.agt-wrap{width:100%;max-width:900px}
.agt-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px 18px 8px;box-shadow:0 1px 8px rgba(15,23,42,.06)}
.agt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.agt-title{font-size:15px;font-weight:700;color:#0f172a}
.agt-sub{font-size:12px;color:#64748b;margin-top:3px}
.agt-btn{border:1px solid #cbd5e1;background:#fff;border-radius:9px;padding:7px 12px;font:600 12px system-ui;color:#0f172a;cursor:pointer}
.agt-btn:hover{border-color:#6366f1;color:#4f46e5}

function d(s) { return new Date(s + 'T00:00:00Z').getTime(); }
var WEEK = 7 * 86400000;
var TEAM_COLORS = { Research: '#8b5cf6', Design: '#ec4899', Engineering: '#0ea5e9', Marketing: '#f59e0b' };

// Each task: a row label (x), a [start, end] range (y) and an owner team.
// Tasks with dependsOn start no earlier than their dependency ends.
var TASKS = [
  { x: 'User interviews',      start: d('2026-10-01'), end: d('2026-10-14'), team: 'Research' },
  { x: 'Information arch.',    start: d('2026-10-12'), end: d('2026-10-23'), team: 'Research', dependsOn: 'User interviews' },
  { x: 'Visual design',        start: d('2026-10-19'), end: d('2026-11-06'), team: 'Design', dependsOn: 'Information arch.' },
  { x: 'Design system tokens', start: d('2026-10-26'), end: d('2026-11-09'), team: 'Design' },
  { x: 'Frontend build',       start: d('2026-11-02'), end: d('2026-11-27'), team: 'Engineering', dependsOn: 'Visual design' },
  { x: 'CMS migration',        start: d('2026-11-09'), end: d('2026-11-30'), team: 'Engineering' },
  { x: 'QA & accessibility',   start: d('2026-11-23'), end: d('2026-12-07'), team: 'Engineering', dependsOn: 'Frontend build' },
  { x: 'Launch campaign',      start: d('2026-12-01'), end: d('2026-12-14'), team: 'Marketing', dependsOn: 'QA & accessibility' },
];

// Push dependants forward so none starts before its dependency ends,
// keeping each task's duration. Tasks are listed in dependency order.
function resolve() {
  var byName = {};
  TASKS.forEach(function (t) {
    if (t.dependsOn && byName[t.dependsOn] && t.start < byName[t.dependsOn].end) {
      var len = t.end - t.start;
      t.start = byName[t.dependsOn].end;
      t.end = t.start + len;
    }
    byName[t.x] = t;
  });
}

function series() {
  return [{
    data: TASKS.map(function (t) {
      return { x: t.x, y: [t.start, t.end], fillColor: TEAM_COLORS[t.team], meta: t.team };
    }),
  }];
}

var TODAY = d('2026-11-04');
var fmt = function (ts) { return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' }); };

resolve();
var chart = new ApexCharts(document.getElementById('agtChart'), {
  chart: { type: 'rangeBar', height: 360, toolbar: { show: false }, fontFamily: 'system-ui, sans-serif' },
  series: series(),
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '58%',
      borderRadius: 5,
      rangeBarGroupRows: false,
    },
  },
  xaxis: { type: 'datetime', labels: { datetimeUTC: true, format: 'dd MMM' } },
  yaxis: { labels: { style: { fontSize: '12px', colors: '#334155' } } },
  grid: { borderColor: '#eef2f7', xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } } },
  dataLabels: {
    enabled: true,
    style: { fontSize: '11px', fontWeight: 600 },
    formatter: function (val) {
      var days = Math.round((val[1] - val[0]) / 86400000);
      return days + 'd';
    },
  },
  annotations: {
    xaxis: [{
      x: TODAY,
      borderColor: '#ef4444',
      strokeDashArray: 4,
      label: { text: 'Today', orientation: 'horizontal', style: { background: '#ef4444', color: '#fff', fontSize: '11px' } },
    }],
  },
  tooltip: {
    custom: function (o) {
      var p = o.w.config.series[o.seriesIndex].data[o.dataPointIndex];
      return '<div style="padding:8px 10px;font:12px system-ui">' +
        '<b>' + p.x + '</b><br>' + p.meta + '<br>' + fmt(p.y[0]) + ' → ' + fmt(p.y[1]) + '</div>';
    },
  },
  legend: { show: false },
});

chart.render();

document.getElementById('agtSlip').addEventListener('click', function () {
  var t = TASKS.find(function (x) { return x.x === 'Visual design'; });
  t.start += WEEK;
  t.end += WEEK;
  resolve();
  chart.updateSeries(series());
});