Gantt
A project timeline with draggable task bars, dependencies, and progress tracking. Renders with a custom Lumeo SVG engine — no third-party charting library.
Installation
dotnet add package Lumeo.Gantt
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Gantt />
Lumeo.Gantt. Zero JS dependencies, zero CDN downloads,
zero theming surprises. All MIT.
When to Use
- Planning a project with ordered phases and cross-task dependencies.
- Letting stakeholders see "what blocks what" at a glance.
- Allowing team leads to drag tasks to reschedule, and drag the progress handle to mark completion.
Drag a bar to move it, or drag the right edge to resize. Drag the progress handle (bottom of the bar) to change completion.
- research — Research (06/04/2026 00:00:00:d → 06/09/2026 00:00:00:d, 100%)
- design — Design (06/09/2026 00:00:00:d → 06/16/2026 00:00:00:d, 60%)
- development — Development (06/16/2026 00:00:00:d → 06/29/2026 00:00:00:d, 30%)
- testing — Testing (06/26/2026 00:00:00:d → 07/04/2026 00:00:00:d, 0%)
- launch — Launch (07/04/2026 00:00:00:d → 07/06/2026 00:00:00:d, 0%)
Use the built-in toolbar above the chart to toggle between Day, Week, Month, and Year. Pass GanttViewMode.QuarterDay or GanttViewMode.HalfDay programmatically for hour-granularity views.
Set IsMilestone = true on any task to render it as a diamond at a point in time.
Milestones are read-only (drag is suppressed) and can carry dependencies just like regular bars.
Pass a GroupBy function and/or set GroupLabel on each GanttTask.
Tasks are sorted by group and a section-header row is injected before the first task of each group.
Use the BarColor delegate to return any CSS colour (hex, rgb, or a CSS variable like
var(--color-destructive)) per task. Useful for traffic-light status colouring.
API Reference
Gantt
| Prop | Type | Default | Description |
|---|---|---|---|
| Tasks | IEnumerable<GanttTask>? | null | The tasks to render. Use with @bind-Tasks for two-way binding. |
| TasksChanged | EventCallback<IEnumerable<GanttTask>> | — | Fires with the updated collection after the user drags a bar or changes its progress. |
| ViewMode | GanttViewMode | Day | Timeline zoom level. Can be changed at runtime via the toolbar. |
| OnTaskClick | EventCallback<GanttTask> | — | Fires when the user clicks a task bar. |
| OnDateChange | EventCallback<GanttTask> | — | Fires with the updated task after a drag or resize completes. |
| OnProgressChange | EventCallback<GanttTask> | — | Fires with the updated task after its progress handle is dragged. |
| Height | string | "500px" | CSS height applied to the Gantt canvas (the toolbar sits above it). |
| Readonly | bool | false | When true the user can no longer drag bars or change progress. |
| TodayHighlight | bool | true | Show/hide the vertical today-line and dot marker on the chart. |
| BarHeight | int? | null (22) | Override the pixel height of each task bar. Defaults to 22 when null. |
| ColumnWidth | int? | null | Override the pixel width of each date column. Each view mode has its own default; this lets you densify or expand the timeline. |
| BarColor | Func<GanttTask, string?>? | null | Per-task bar colour delegate. Return a CSS colour (hex, rgb, or var(--…)) or null to use the primary theme colour. |
| GroupBy | Func<GanttTask, string>? | null | When set, tasks are sorted by the returned group key and a section-header row is injected before each group. Works in tandem with GanttTask.GroupLabel. |
| TrailingContent | RenderFragment? | null | Optional slot on the right side of the toolbar — typical usage is an "Add task" button. |
| Class | string? | null | Additional CSS classes applied to the outer wrapper. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes forwarded to the root element. |
GanttTask
| Field | Type | Description |
|---|---|---|
| Id | string | Stable identifier used to reconcile drag edits back into the caller's collection. |
| Name | string | The label rendered on the task bar. |
| Start | DateTime | Start date (inclusive). Frappe Gantt works at day granularity. |
| End | DateTime | End date. |
| Progress | int | Completion percentage, 0–100. Drives the progress fill inside the bar. |
| Dependencies | string[]? | Ids of tasks this task depends on. Rendered as arrows in the chart. Read-only; interactive link creation is not supported by the SVG engine. |
| CustomClass | string? | Extra CSS class applied to the bar — use to color-code milestones or delayed work. |
| IsMilestone | bool | When true, renders as a diamond at the Start date. End is clamped to Start. Drag is suppressed for milestones. |
| GroupLabel | string? | Optional swim-lane label. When the Gantt's GroupBy parameter is set, tasks carrying the same GroupLabel are clustered together with a section header. |
GanttViewMode
| Value | Description |
|---|---|
| QuarterDay | 6-hour columns — useful for hour-scale shift scheduling. Not exposed in the toolbar. |
| HalfDay | 12-hour columns. Not exposed in the toolbar. |
| Day | One column per day — the default. |
| Week | One column per week. |
| Month | One column per month — best for multi-quarter plans. |
| Year | One column per year — best for roadmap-style views. |