Gantt Chart ^0.1.19

Horizontal timeline for tasks with start/end dates, progress bars, and dependency arrows. Great for sprints, release plans, and roadmaps.

Basic

<VxGanttChart
  :tasks="[
    { id: 'a', name: 'Research',    start: '2026-04-01', end: '2026-04-08' },
    { id: 'b', name: 'Design',      start: '2026-04-06', end: '2026-04-16' },
    { id: 'c', name: 'Development', start: '2026-04-14', end: '2026-05-04' },
    { id: 'd', name: 'QA',          start: '2026-04-28', end: '2026-05-08' },
    { id: 'e', name: 'Launch',      start: '2026-05-06', end: '2026-05-10' },
  ]"
/>

With progress

Progress fills the bar from the left — track completion inline.

<VxGanttChart
  :tasks="[
    { id: '1', name: 'Discovery',     start: '...', end: '...', progress: 1 },
    { id: '3', name: 'Visual design', start: '...', end: '...', progress: 0.72 },
    { id: '4', name: 'Prototype',     start: '...', end: '...', progress: 0.35 },
    ...
  ]"
/>

Dependencies

Task dependencies draw arrows from predecessors. Hover to highlight the chain.

<VxGanttChart
  :tasks="[
    { id: 'spec', name: 'Write spec', start: '...', end: '...' },
    { id: 'api',  name: 'API scaffolding', start: '...', end: '...',
      dependencies: ['spec'] },
    { id: 'tests', name: 'Integration tests', start: '...', end: '...',
      dependencies: ['ui', 'db'] },
    ...
  ]"
/>

Release pipeline with custom colors

<VxGanttChart
  :tasks="[
    { id: 'r1', name: 'v1.2 scoping', start: '...', end: '...', color: '#6366f1' },
    { id: 'r3', name: 'v1.2 release', start: '...', end: '...', color: '#22c55e' },
    { id: 'r5', name: 'v1.3 build',   start: '...', end: '...', color: '#f59e0b' },
    ...
  ]"
/>

Sprint view (day scale)

For short ranges the chart auto-switches to a per-day grid.

<VxGanttChart :tasks="sprint" :rowHeight="30" :barHeight="16" />

Yearly roadmap (month scale)

For long ranges the chart auto-switches to a per-month grid.

<VxGanttChart
  :tasks="[
    { id: 'q1', name: 'Q1 — Foundation', start: '2026-01-01', end: '2026-03-31' },
    { id: 'q2', name: 'Q2 — Growth',     start: '2026-04-01', end: '2026-06-30' },
    ...
  ]"
  today="2026-04-17"
/>

Team swimlanes

Use color per task to group teams visually.

<VxGanttChart :tasks="teams" :labelWidth="200" />

Compact (no labels, no dates)

<VxGanttChart
  :tasks="tasks"
  :showLabels="false"
  :showDates="false"
  :headerHeight="12"
  :rowHeight="22"
  :barHeight="12"
/>

Today indicator disabled

<VxGanttChart :tasks="tasks" :showToday="false" />

Props

Prop	Type	Default	Description
tasks	GanttTask[]	[]	{ id, name, start, end, progress?, color?, dependencies?[] }
rowHeight	number	36	Height of each task row
barHeight	number	20	Height of the bar inside the row
barRadius	number	4	Bar corner radius
labelWidth	number	160	Width reserved for task names on the left
headerHeight	number	40	Height of the date axis header
colors	string[]	[]	Palette override (used when task has no color)
scale	'day' | 'week' | 'month' | 'auto'	'auto'	Grid granularity
today	string | Date | null	null	Reference date for the today line (defaults to now)
showProgress	boolean	true	Fill bars based on progress
showToday	boolean	true	Draw the dashed "today" line
showDependencies	boolean	true	Draw dependency arrows
showGrid	boolean	true	Draw vertical grid lines
showLabels	boolean	true	Show task name column
showDates	boolean	true	Show date labels in the header
tooltip	boolean	true	Hover tooltip
animate	boolean	true	Grow bars in on mount

Events

Event	Payload
hover	{ task }
click	{ task }