Gantt Chart
Tasks as bars on a calendar — groups that fold, progress, milestones and a line for today, scrolled and zoomed from days to quarters. The timeline layout puts every task of a group on one lane.
Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).
Basic
Tasks sit under their groups with a summary bar each; a group folds from its header. Bars show the progress, diamonds are milestones and the red line is today. Hover or focus a bar for its dates, length and progress.
Timeline
layout="timeline" puts every task of a group on one lane — bookings, shifts, releases. Names go inside the bars; color paints one task.
Zoom
zoom is two-way: day, week, month or quarter. Switch it in the toolbar, with + / − on a focused bar or with Ctrl (⌘) and the wheel at the pointer.
Events
taskClick reports the clicked task with its start and its exclusive end; groupToggle reports a folded or opened group.
Click a bar or fold a group.
Compact
Without the toolbar, bar names and the today line ([today]="null"), and with maxHeight the rows scroll under the sticky header.
Loading and empty
loading shows skeleton rows; empty tasks show "No data".
Accessibility
The bars are one tab stop: ↑/↓ move between rows, ←/→ between bars, Home / End to the ends, Enter clicks, + / − zoom. Every bar has an accessible name with its dates, length and progress; the region is named by a summary with the date range.
Design tokens
dt sets the row and bar height, the radius, the label column, the progress track, the weekends and the today line of one chart.
Pass through
pt reaches the parts — toolbar, scroll, head, scale, row, group, label, lane, bar, milestone, today and more.
Unstyled
unstyled removes the tectra styles: the sticky layout, the bars, the keyboard and the tooltips stay, ready for your own CSS.