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 (07/23/2026 00:00:00:d → 07/28/2026 00:00:00:d, 100%)
- design — Design (07/28/2026 00:00:00:d → 08/04/2026 00:00:00:d, 60%)
- development — Development (08/04/2026 00:00:00:d → 08/17/2026 00:00:00:d, 30%)
- testing — Testing (08/14/2026 00:00:00:d → 08/22/2026 00:00:00:d, 0%)
- launch — Launch (08/22/2026 00:00:00:d → 08/24/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.
Set Readonly="true" to lock the chart — bars can't be dragged or resized.
Turn off the today marker with TodayHighlight="false", and densify the timeline with BarHeight / ColumnWidth.
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
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. |