A Gantt chart that behaves like a controlled input
Drag a bar and the complete next tasks array comes back through onTasksChange. Your app holds that array, and the chart persists nothing.
pnpm add @jaeungkim/gantt-chartTry it
The chart below is the published component. Drag a bar, pull an edge, or draw a link between two rows.
Controlled editing
Drag to move, pull an edge to resize, drag the handle to set progress, draw an arrow to link two rows. Every gesture calls onTasksChange with the complete next array.
Working calendar
Set the working weekdays, and give each holiday a name and a colour. Turn on workingCalendar and a drop on a non-working day moves forward to the next working day.
Headless core
createWorkingCalendar and the task tree helpers import no React. They use no DOM, so a server or a worker can run them.
Virtualized
Rows and timeline ticks are both windowed, so the chart renders what is on screen plus a small overscan.
Keyboard and screen readers
An ARIA treegrid with a roving tabindex, arrow key navigation and keyboard edits announced in a status region. The accessibility page lists the gaps.
CSS custom properties
Every colour reads from a CSS custom property. With no theme prop set, the chart follows the host page's color-scheme.
Read the docs
Every prop, guide and reference page, in English and Korean.