Gantt Chart
Plot tasks and their durations along a timeline.
Preview
Import
import { GanttChart } from "@sigil-ui/components";Usage
<GanttChart
totalUnits={6}
unitName="Sprint"
groups={[
{
label: "Backend",
tasks: [
{ id: "api", label: "API Design", start: 0, end: 2 },
{ id: "db", label: "Database", start: 1, end: 4 },
],
},
{
label: "Frontend",
tasks: [
{ id: "ui", label: "Components", start: 2, end: 5 },
{ id: "launch", label: "Launch", start: 5, end: 6, milestone: true },
],
},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
groups | GanttGroup[] | — | — |
totalUnits | number | — | Total number of time units on the x-axis. |
unitLabels | string[] | — | Labels for x-axis columns (e.g. week names, sprint names). |
unitName | string | Sprint | Unit label shown in header. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-card | Radius card |
--s-border | Border |
--s-surface | Surface |
--s-text-muted | Text muted |
--s-surface-elevated | Surface elevated |
--s-text | Text |
--s-primary | Primary |
--s-radius-sm | Radius sm |