cnc-gantt-chart
A project timeline: grouped tasks as bars across a day, week or month scale, with dependency
arrows and dated markers. One content object holds the whole chart.
Quick start
Give it a content object with eventsData, and optionally
dependenciesData
and markers. Tasks nest one level: a parent groups the children that carry the
actual dates.
{
eventsData: [
{ id: 1, name: 'Write docs', expanded: true, children: [
{ id: 2, name: 'Proof-read', startDate: '2025-02-03', endDate: '2025-02-07',
progress: '100%', completed: true },
{ id: 3, name: 'Release', startDate: '2025-02-10', endDate: '2025-02-12',
progress: '80%', style: 'background: var(--color-primary-500)' }
]}
],
dependenciesData: [ { id: 1, fromEvent: 2, toEvent: 3 } ],
markers: [ { date: '2025-02-03', label: 'Phase 1' } ]
}content keys
| Key | Purpose |
|---|---|
| eventsData |
The tasks. A parent carries id, name,
expanded
and children; each child carries
startDate, endDate, progress, optional
completed
and an optional style string for its bar.
|
| dependenciesData |
Arrows between tasks: { id, fromEvent, toEvent }, referring to task ids.
|
| markers |
Dated vertical lines: { date, label } — phase boundaries, deadlines,
today.
|
Usage guidance
It is read-only. Nothing is draggable and no event is emitted, so rescheduling has to happen
elsewhere and be fed back through content.
Assign large charts through _content on the element rather than a JSON attribute. A
real project plan serialised into markup is unreadable, and the widget accepts the direct object
reference for exactly this reason.
Dates are formatted en-US deliberately, matching what the axis labels rendered with
before the date library was dropped. There is no locale option, so a chart for another audience
will show US-ordered dates on its axis.