Gantt
ganttPlots grouped tasks and progress on scrollable day, week, or month timelines with a today marker.
Usage
Basic usage
Input tasks (start/end is the closed interval of YYYY-MM-DD), and the time axis will be automatically filled according to the data range.
const tasks = [
{ id: "s1", name: "Requirements Review", start: "2026-06-01", end: "2026-06-03", progress: 100},
{ id: "s2", name: "Interface joint debugging", start: "2026-06-03", end: "2026-06-10", progress: 70},
{ id: "s3", name: "Grayscale online", start: "2026-06-10", end: "2026-06-14", progress: 10 },
];
<Gantt tasks={tasks} unit="week" />Progress and today's line
progress 0-100 The driving bar is filled with dark color; today draws a red vertical line when it falls within the range.
<Gantt tasks={tasks} unit="week" today="2026-06-08" />Grouping
Tasks with the same group are grouped together with subtitles in the left column (in the order of incoming, no forced rearrangement).
const tasks = [
{ id: "t1", name: "Site Survey", start: "2026-06-01", end: "2026-06-05", progress: 100, group: "early period" },
{ id: "t3", name: "Main Construction", start: "2026-06-08", end: "2026-06-24", progress: 60, group: "Construction" },
{ id: "t5", name: "Complete Acceptance", start: "2026-07-01", end: "2026-07-06", progress: 0, group: "End" },
];
<Gantt tasks={tasks} unit="week" today="2026-06-18" />Scale unit
unit Cut day / week / month Change the scale density of the meter head; day scrolls horizontally when the scales are dense.
<Gantt tasks={tasks} unit="month" today="2026-06-18" />Customize bar color
task.color Overrides the default theme color (CSS color, such as token var() or hex).
const tasks = [
{ id: "s1", name: "Requirements Review", start: "2026-06-01", end: "2026-06-03", progress: 100},
{ id: "s2", name: "Interface joint debugging", start: "2026-06-03", end: "2026-06-10", progress: 70, color: "var(--color-chart-2)" },
{ id: "s3", name: "Grayscale online", start: "2026-06-10", end: "2026-06-14", progress: 10, color: "var(--color-chart-4)" },
];
<Gantt tasks={tasks} unit="week" />When to use
Use Gantt to present a project or process schedule with progress. It is read-only. Use Scheduler to drag-edit timed events, or Flow to show dependencies.
Import
import { Gantt } from "@hulianui/ui"Props
Inherits HTMLAttributes<HTMLDivElement> except children.
| Name | Type | Default | Description |
|---|---|---|---|
| tasks* | GanttTask[] | — | Read-only task list. |
| rangeStart | string | — | "YYYY-MM-DD" axis start; omission pads before the earliest task. |
| rangeEnd | string | — | "YYYY-MM-DD" axis end; omission pads after the latest task. |
| unit | "day" | "week" | "month" | "day" | Header tick density; weeks start Monday and bars keep the same geometry. |
| today | string | — | "YYYY-MM-DD" today marker, rendered only within range. |
| rowHeight | number | 36 | Row height in pixels. |
| className | string | — | Root class name. |
GanttTask is {id, name, start, end, progress?, group?, color?}. Dates are inclusive "YYYY-MM-DD" values, progress is 0–100, matching groups receive headings, and color accepts CSS colors or tokens.
Example
const tasks: GanttTask[] = [
{ id: "t1", name: "Site survey", start: "2026-06-01", end: "2026-06-05", progress: 100, group: "Planning" },
{ id: "t3", name: "Main construction", start: "2026-06-08", end: "2026-06-24", progress: 60, group: "Build" },
{ id: "t5", name: "Final inspection", start: "2026-07-01", end: "2026-07-06", progress: 0, group: "Closeout" },
];
<Gantt tasks={tasks} unit="week" today="2026-06-18" />Usage notes
- Dates are inclusive and parsed with UTC arithmetic. Do not pass timestamps or timezone offsets; those belong in Scheduler.
- Token colors need full names such as
var(--color-chart-2); see [[hulian-token-color-var-needs-color-prefix]]. - The timeline can exceed its container. Give the outer layout a definite responsive width so horizontal scrolling can appear.
- Built-in Chinese copy includes
"\u6682\u65e0\u6392\u671f\u6570\u636e"(“No schedule data”),"\u9879\u76ee\u6392\u671f\u7518\u7279\u56fe"(“Project schedule Gantt chart”),"\u5de5\u5e8f"(“Task”), and month labels"1\u6708"through"12\u6708"(“January” through “December”).
Related
The chart label, empty state, task-column heading, and month ticks follow ConfigProvider.
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Gantt tasks={tasks} unit="week" today="2026-06-18" />