# Gantt
Source: https://lumeo.nativ.sh/components/gantt
# 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
.NET CLI PackageReference Lumeo CLI
dotnet add package Lumeo.Gantt
One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).
## Usage
@using Lumeo
**Dependencies & licensing — fully MIT, no third-party deps.** Originally wrapped Frappe Gantt v1.x, but since 2.0 the Gantt is rendered by ~400 lines of custom Lumeo SVG code shipping in `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.
Preview Code
Basic project plan
Day Week Month Year
Preview Code
With progress bars
Day Week Month Year
Preview Code
Drag to reschedule + change progress
Drag a bar to move it, or drag the right edge to resize. Drag the progress handle (bottom of the bar) to change completion.
Day Week Month Year
Last change
Drag a bar to see it here.
Current tasks
- 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%)
Preview Code
View modes
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.
Day Week Month Year
Preview Code
Milestones
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.
Day Week Month Year
Preview Code
Grouping / swim-lanes
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.
Day Week Month Year
Preview Code
Per-task bar colour
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.
Day Week Month Year
## API Reference
### Gantt
Prop
Type
Default
Description
Tasks
IEnumerable?
null
The tasks to render. Use with @bind-Tasks for two-way binding.
TasksChanged
EventCallback>
—
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
—
Fires when the user clicks a task bar.
OnDateChange
EventCallback
—
Fires with the updated task after a drag or resize completes.
OnProgressChange
EventCallback
—
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?
null
Per-task bar colour delegate. Return a CSS colour (hex, rgb, or var(--…)) or null to use the primary theme colour.
GroupBy
Func?
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?
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.
## Related Components
- [Scheduler](/components/scheduler) — calendar-style event grid when you care about time-of-day rather than project phases.
- [Data Grid](/components/datagrid) — tabular view of the same task data when a timeline isn't needed.