Gantt Chart
A project timeline Gantt chart with grouped tasks, sprint columns, and milestone markers.
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 },
],
},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
groups | GanttGroup[] | — | Task groups with label and tasks array |
totalUnits | number | — | Total time units on the x-axis |
unitLabels | string[] | — | Custom labels for each unit column |
unitName | string | "Sprint" | Header label for time units |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Task bar and milestone color |
--s-border | Table borders |
--s-surface | Background and sticky column |
--s-surface-elevated | Group header background |
--s-text | Task labels |
--s-text-muted | Column headers and unit labels |
--s-radius-card | Outer container radius |
--s-radius-sm | Task bar corner radius |