Examples
Each GanttTask has a Name, Start and End; tasks with the same Group are listed under its name, Progress fills the done part and a task without an End is a milestone.
Today places the marker at any moment (it defaults to the current date) and TodayLabel names it; without groups the tasks are listed in order.
Tasks with the same Row share one lane, labelled with the key. ShowGroupHeaders="false" lets groups only colour the bars, ShowLegend names them, GroupColors maps a group to any CSS colour and a task's own Color wins. Dates follow the current culture.
Playground
<GanttChart
Title="Acme Cloud 3.0 release plan"
AspectRatio="1.6"
Tasks="@_tasks" />
@code {
// Tasks share a Group to be listed together; Progress is the done fraction; no End makes a milestone.
private readonly GanttTask[] _tasks =
[
new("Kick-off", new DateTime(2026, 9, 28)),
new("Research", new DateTime(2026, 9, 28), new DateTime(2026, 10, 9), "Discovery", 1),
new("Specs", new DateTime(2026, 10, 5), new DateTime(2026, 10, 16), "Discovery", 1),
new("API", new DateTime(2026, 10, 12), new DateTime(2026, 11, 6), "Build", 0.45),
new("Dashboard", new DateTime(2026, 10, 19), new DateTime(2026, 11, 13), "Build", 0.1),
new("Docs", new DateTime(2026, 11, 2), new DateTime(2026, 11, 20), "Build", 0),
new("Beta", new DateTime(2026, 11, 16), new DateTime(2026, 11, 27), "Launch"),
new("General availability", new DateTime(2026, 11, 30), Group: "Launch"),
];
}API
<GanttChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- From DateTime?= null
Start of the time axis, e.g. the start of a shift. Defaults to the earliest task; tasks are clipped to it, and tasks that end before it are left out.
- GroupColors IReadOnlyDictionary<
string, string> = nullOptional colour per group name (any CSS colour); other groups cycle through the theme palette. A task's own Color wins.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- ShowGroupHeaders bool= true
List the rows of each group under a header row (the default). False keeps the rows in task order and lets groups only colour the bars, e.g. when a lane holds tasks of several groups.
- ShowLegend bool= false
Show a legend of the groups and their colours.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- ShowToday bool= true
Draw the today marker.
- Tasks IReadOnlyList<
GanttTask> = []The tasks, listed top to bottom (grouped tasks under their group's header, groups in order of first appearance). A task without an End is a milestone; tasks with the same Row share one lane.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- To DateTime?= null
End of the time axis. Defaults to the latest task end; tasks are clipped to it, and tasks that start after it are left out.
- Today DateTime?= null
The date the today marker shows. Defaults to the current date; the marker is drawn only when it falls within the tasks' span.
- TodayLabel string= "Today"
Text of the today marker.
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.