GanttChart

Live preview

Loading example…

Project plan: a task list (name, start, end, progress; collapsible parents with summary bars) beside a zoomable timeline (hours to quarters) with progress bars, milestones, finish-to-start dependency arrows, a today line and shaded non-working days. Both panes share one scroller, so they scroll together; the header and the list stay pinned. Optional editing by drag or keyboard reports changes through onTaskChange.

Import

import { GanttChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/gantt-chart.

Usage

<GanttChart
  title="Remodelación de la sede San Isidro"
  tasks={remodelacion}
  defaultZoom="day"
  rowHeight={36}
  editable={false}
  dependencies
  tooltip
  loading={false}
  animate
  texts={spanishTexts}
  labels={spanishLabels}
  holidays={[day(10, 8)]}
/>

Props

Prop	Type	Default	Description
`tasks` *	`readonly GanttTask[]`
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`zoom`	`"week" \| "month" \| "hour" \| "day" \| "quarter" \| "year"`		Controlled zoom level.
`defaultZoom`	`"week" \| "month" \| "hour" \| "day" \| "quarter" \| "year"`	`"day"`	Initial zoom when uncontrolled, “day” by default.
`onZoomChange`	`((zoom: GanttZoom) => void)`
`zoomLevels`	`readonly GanttZoom[]`	`GANTT_ZOOM_ORDER`	Zoom buttons offered in the toolbar; all five by default.
`today`	`number \| false \| Date \| "auto"`	`"auto"`	Today line. “auto” uses the current date (default); false hides it.
`height`	`number \| "fill"`		Pixels, or `"fill"` to take the parent’s height (rows scroll inside). By default the chart is as tall as its rows, between 220 and 560 px.
`aspectRatio`	`number`		Width / height ratio; sizes the chart from the container width.
`rowHeight`	`number`	`36`	Height of one task row, 36 by default.
`gridWidth`	`number`		Initial width of the task list; by default about 40% of the chart, 120-380 px.
`columns`	`readonly ("progress" \| "start" \| "end")[]`	`["start", "end", "progress"]`	Optional columns of the task list, shown while they fit.
`editable`	`boolean`	`false`	Drag bars to move or resize them and drag the progress handle; keyboard alternatives too.
`onTaskChange`	`((change: GanttTaskChange) => void)`		Receives every committed edit; update `tasks` to apply it (controlled).
`workingDays`	`readonly number[]`	`[1, 2, 3, 4, 5]`	Weekdays that are worked, 0 = Sunday. Monday to Friday by default.
`holidays`	`readonly (number \| Date)[]`		Extra non-working days (holidays), shaded like weekends.
`defaultCollapsed`	`readonly string[]`		Parent ids collapsed at first render.
`dependencies`	`boolean`	`true`	Finish-to-start arrows (default true).
`showCriticalPath`	`boolean`	`false`	Highlight the critical path: the chain of tasks and links with no slack, computed from the dependencies (`criticalPath`). Others show their slack in the tooltip.
`showBaselines`	`boolean`	`false`	Draw each task’s `baseline` as a thin bar under the actual one, with the variance in the tooltip.
`annotations`	`readonly GanttAnnotation[]`		Dated lines and bands (releases, deadlines, closures) over the timeline.
`exportable`	`boolean`	`false`	Show SVG and PNG export buttons in the toolbar.
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`texts`	`Partial<Omit<GanttTexts, "zoomLevels" \| "zoomShort"> & { zoomLevels: Partial<GanttTexts["zoomLevels"]>; zoomShort: Partial<GanttTexts["zoomShort"]>; }>`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/gantt-chart/gantt-chart.tsx