Gantt

A period-based schedule drawn as plain CSS, not a chart engine. Each row is one piece of work laid on a shared column grid as a bar that starts at a period and spans a number of them; a progress fill lets plan and actual read in one mark. Like the meter family it is a handful of divs, so it stays crisp at any zoom, needs no canvas and renders on the server. Every bar takes a textual label, so colour is never the only signal. The live version is on the Project chains showcase.

Discovery

FCE-01

40 / 40 md

Ingestion pipeline

FCE-12

68 / 64 md

Forecast model

FCE-33

48 / 72 md

Planning UI

FCE-38

12 / 88 md

Rollout

FCE-60

0 / 40 md

const periods = ['Q1', 'Q2', 'Q3', 'Q4'];
const rows = [  { id: 'discovery', label: 'Discovery', secondary: 'FCE-01', start: 0, span: 1, progress: 100, tone: 'success', value: '40 / 40 md' },  { id: 'model', label: 'Forecast model', secondary: 'FCE-33', start: 2, span: 1, progress: 70, tone: 'info', value: '48 / 72 md' },  { id: 'rollout', label: 'Rollout', secondary: 'FCE-60', start: 3, span: 2, progress: 0, tone: 'neutral', value: '0 / 40 md' },];
<Gantt periods={periods} rows={rows} labelWidth="12rem" valueWidth="6rem" />

Props

Prop	Type	Default	Notes
`periods`	`string[]`	—	Column headers, one per period.
`rows`	`GanttRow[]`	—	One bar per row.
`labelWidth`	`string`	`'12rem'`	Width of the left label gutter.
`valueWidth`	`string`	`'6rem'`	Trailing value column width; shown when any row has a value.
`minWidth`	`string`	`'32rem'`	Minimum inner width before the chart scrolls horizontally.

GanttRow

Prop	Type	Default	Notes
`id`	`string`	—	Stable row id.
`label`	`ReactNode`	—	Row label in the left gutter.
`secondary`	`ReactNode`	—	Quieter sub-label beneath the label.
`start`	`number`	—	Zero-based index into periods where the bar starts.
`span`	`number`	—	Number of periods the bar spans (minimum 1).
`progress`	`number`	—	0–100 progress fill; defaults to a full bar.
`tone`	`BadgeTone`	`'info'`	Bar fill colour.
`value`	`ReactNode`	—	Trailing figure, e.g. “12 / 88 md”.
`title`	`string`	—	Accessible name and hover title for the bar.