# GanttChart

> 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…

Source: https://ui.jcsoftdev.com/docs/components/gantt-chart

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/charts-ganttchart--default)
- [Editable](/storybook/?path=/story/charts-ganttchart--editable)
- [Weeks](/storybook/?path=/story/charts-ganttchart--weeks)
- [Quarters](/storybook/?path=/story/charts-ganttchart--quarters)
- [Collapsed](/storybook/?path=/story/charts-ganttchart--collapsed)
- [Opening Day Hours](/storybook/?path=/story/charts-ganttchart--opening-day-hours)
- [Without Dependencies](/storybook/?path=/story/charts-ganttchart--without-dependencies)
- [Loading](/storybook/?path=/story/charts-ganttchart--loading)
- [Empty](/storybook/?path=/story/charts-ganttchart--empty)
- [Narrow](/storybook/?path=/story/charts-ganttchart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-ganttchart--fill-parent)
- [Critical Path](/storybook/?path=/story/charts-ganttchart--critical-path)
- [Baselines](/storybook/?path=/story/charts-ganttchart--baselines)
- [Annotations](/storybook/?path=/story/charts-ganttchart--annotations)
- [Year View](/storybook/?path=/story/charts-ganttchart--year-view)
- [Milestones](/storybook/?path=/story/charts-ganttchart--milestones)
- [Progress](/storybook/?path=/story/charts-ganttchart--progress)
- [Export](/storybook/?path=/story/charts-ganttchart--export)

## Source

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