Gantt Chart in HTML, CSS and JavaScript

const tasks = [['Permits', '2026-08-10', '2026-08-28', 100], ['Plumbing', '2026-09-07', '2026-09-25', 80], ['Painting', '2026-10-12', '2026-10-21', 0]];
const start = new Date('2026-08-01'), end = new Date('2026-11-01');
const x = d => 120 + (new Date(d) - start) / (end - start) * 460;

tasks.forEach(([name, from, to, done], i) => {
  const y = 30 + i * 40;
  drawText(110, y + 18, name, 'end');
  drawRect(x(from), y, x(to) - x(from), 24, '#f0c9b8');
  drawRect(x(from), y, (x(to) - x(from)) * done / 100, 24, '#b5552d');
});
drawLine(x('2026-09-23'), 20, x('2026-09-23'), 150, '#b5552d', 2, '5 4'); // today

const svg = document.querySelector('svg');
function make(tag, attrs) {
  const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  svg.appendChild(n);
  return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
  return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
  const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
  t.textContent = str;
  return t;
}