← Gallery
Gantt
19 of 23From plot to keys
Building a house trade by trade, with the months as a Scale of bands and today drawn over the plan.
- Scale of intervals
- overlay Plot
- key
- hover
The simple version
A bar from each task's start to its end. The same structure with almost no styling: a good place to start your own.
How it’s built
A task is a Bar that does not start at zero.
from={d.start} and to={d.end} put it between two weeks on the scale, and a start Label carries its name.
key="task" ties each slat to its task, and order={sortBy("start")} puts the earliest first.
The gallery version adds:
- Months drawn by a
Scale. Each tick’s slat knows the next tick’s value asd.next, so a Bar fromd.attod.nextfills the band between two ticks, and every other one is shaded. - A today line, as a second Plot over the first.
It is given
pointer-events: noneso that the pointer still reaches the bars underneath it. - Hovering a trade dimensions it, the way a drawing does: a line with marks at both ends and its length in weeks.