# Gantt (Legacy)

Source: https://lumeo.nativ.sh/components/gantt-legacy

# Gantt (Legacy)

The original SVG-based Gantt engine. Kept for backward compatibility — new projects should use GanttChart.

**Not recommended for new code.** `Gantt` is the original SVG-based engine — no tree pane, no hierarchy, no commit gate, a fixed 5-scale zoom range. It still ships unchanged in `Lumeo.Gantt` for existing consumers. New projects should use [`GanttChart`](/components/gantt-chart), the actively developed engine with dependency arrows, milestones, hierarchy, a real drag commit gate, and 7 zoom levels.

## 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

<Gantt />

**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.

Preview Code

Basic project plan

DayWeekMonthYear

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.

DayWeekMonthYear

Last change

Drag a bar to see it here.

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.

DayWeekMonthYear

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.

DayWeekMonthYear

Preview Code

Read-only

Set `Readonly="true"` to lock the chart — bars can't be dragged or resized.

DayWeekMonthYear

## 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.

## Related Components

-   [GanttChart](/components/gantt-chart) — the actively developed engine: hierarchy, commit gate, 7 zoom levels.
-   [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.