Gantt
A plan drawn against a timeline: a task list down the side, a bar for every task across from it, and arrows for what has to happen first. Six zoom levels, summary roll-up, four dependency types, drag, resize, progress and row re-parenting — all worked out in C#, so it draws the same on Blazor Server, on WebAssembly and in print.
Every gesture asks rather than writes
Cancel and the bar snaps straight back.
Default
Data, and readers for a task's identifier, name, start and end. With no Columns declared the chart shows one column of task names, and the toolbar offers the six zoom levels, expand and collapse, and a jump to today.A Tree, Columns and Dependencies
ParentIdSelector and the flat list becomes a tree. A task with children is a summary, drawn as a bracket rather than a bar because it is the span of what is under it rather than a task in its own right; its dates and its progress roll up from its children, weighted by how long each one runs. A task with no length is a milestone, drawn as a diamond. Columns are declared with BbGanttColumn; the first one declared carries the expander and the indent unless another sets IsTree. Done and Own are the same number read two ways: ChildContent reads the row, so it agrees with the bar beside it, while Value reads the task as it was written down — which on a summary is the nothing that was typed rather than what rolled up. Value is what a sort compares.Six Zoom Levels
SlotWidth overrides the width the zoom would pick; RangeSnap decides how far past the tasks the timeline is widened.Drag, Resize and Progress
AllowDrag moves a bar, AllowResize pulls its edges and AllowProgressDrag puts a grip on the fill. All three come back through one OnTaskChange with Kind saying which, carrying all four values so a handler stores them the same way whichever fired. SnapToSlot lands a drag on whole slots — a plan agreed in days should not come back with a start at 09:47 because that is where the pointer was let go. Turn the second switch on to see Cancel snap a bar back.Drawing and Deleting Dependencies
AllowLinking puts a dot at each end of every bar. Drag from one to another and the two ends the gesture touched decide the type between them — leave from the end, drop on a start, and that is a finish-to-start. There is no menu asking which of the four was meant. OnDependencyCreate is where loop detection goes; OnDependencyClick is how an arrow gets deleted, and an arrow is only clickable while linking is on.Reordering and Re-parenting: the Same Gesture
AllowRowDrag lets a row be dragged up and down the task list. Dropping between two rows reorders; dropping onto the middle of one re-parents. OnTaskMove hands over a NewParentId already worked out from the target and the position, so a handler that only stores a parent identifier does not have to reason about the two cases itself. A task dropped into its own branch is refused by the chart rather than handed back as a tree that is no longer a tree.Editing Through the Column Templates
TooltipTemplate replaces what the hover card holds.Driving the Chart from Outside
ShowToolbar="false" removes the built-in toolbar and the five methods drive the chart from anywhere. CollapsedIds names the closed set rather than the open one — unlike the Data Grid's ExpandedNodes — because a plan is read open, so an empty set is the state a reader wants first. OnBuilt reports the chart when the built result changes; reading Chart through @ref in a parent's markup is always one render behind.Working Days, a Fixed Range and Coloured Bars
NonWorkingDays shades the days a team does not work; it defaults to Saturday and Sunday, and the shading only applies at Hour and Day zoom because no week, month or year is entirely non-working. RangeStart and RangeEnd fix the timeline rather than taking it from the tasks. BarColorSelector returns any CSS colour, or null to keep the theme's — here the critical path is red.Loading and Empty States
Loading replaces the chart with a waiting indicator. With nothing to draw, EmptyMessage replaces the localized “Nothing to schedule”.What the shapes mean
ShowLegend names these under the chart and lists only what that chart actually draws:
no milestone entry where there are none, no shading entry where nothing is shaded.
| Shape | Meaning |
|---|---|
| Filled bar | A task. The solid part is what is done. |
| Bracket (a thin line with a leg at each end) | A summary: a task with children. It is the span of what is under it rather than a task in its own right, which is why it is not drawn as a bar. |
| Diamond | A milestone: a task with no length, or one whose end is before its start. |
| Shaded column | A non-working day. |
| Vertical line | Today. |
Right-to-left
Time runs the way the page reads. In a right-to-left page the task list moves to the right, the timeline starts
at the right edge, and the bars, the shading, the today line and the arrows all turn round with it. Nothing is
configured: everything is placed with logical offsets, which mirror on their own. Two things cannot — a
repeating gradient needs a physical direction, and an SVG coordinate system does not flip with the page —
so those are handled off [dir="rtl"] in the stylesheet. A drag reads the direction at the moment of
the gesture, so dragging towards the right edge moves a task earlier.
See Direction.