Gantt Chart

Gantt charts with dependencies and drag to reschedule. Pro · Work and teams › Planning

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add gantt-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { GanttChart } from 'valyro-ui-pro';

Prop	Type	Default
`tasks` *	`GanttTask[]`		Rows of the timeline, listed under their phase in array order; tasks without a valid `start` are skipped.
`groups`	`GanttGroup[]`	`[]`	Phases in display order; tasks reference them with `group`.
`zoom`	`'day' \| 'week' \| 'month'`	`'week'`	Time scale: one column per day, week or month. Default `week`.
`defaultCollapsed`	`string[]`		Phases collapsed on first render.
`today`	`Date \| null`		Day marked with the today line. Default: the current date; `null` hides the line.
`onTaskChange`	`(task: GanttTask, change: GanttTaskChange) => void`		Makes bars draggable (move, or resize by an end) and keyboard-editable; called with the new dates.
`rowHeight`	`number`	`36`	Row height in px. Default 36.
`taskColumnWidth`	`number`	`220`	Width of the sticky task-name column in px (narrower in small containers). Default 220.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	0 = Sunday, 1 = Monday: where week columns start. Default 1.
`locale`	`string`		BCP 47 locale for dates and numbers. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<GanttChartLabels>`		Overrides for the built-in strings.
`loading`	`boolean`	`false`	Shows a placeholder while data loads.
`ariaLabel` *	`string`		Accessible name of the timeline (also the caption of its sr-only data table).

Calendar View — Event calendar
Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
Kanban Board — Task board
Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Team Members — Team members: roles, email invites, pending invitations, seat count
Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
Activity Feed — Activity feed