JavaScript Gantt Chart in a Spreadsheet
The Gantt extension draws a project timeline on the rows of a JavaScript spreadsheet. Every task keeps its cells and gets a bar on a shared time scale. Dragging the bar changes the dates in the cells.
Published on October 3, 2026
Introducing
@jspreadsheet/gantt adds a timeline column to any worksheet. You name the columns that hold the task, the start, the end, the progress, the color and the predecessors. The extension draws one bar per row, inside the same table. Scroll, sort or filter, and the bars stay on their rows.
The chart is not a separate view of the data: it is the data. Move a bar and the date cells change. Draw an arrow and the predecessors cell changes. Undo, events and the collaboration server see ordinary cell edits.
How the extension works
Most Gantt components take a list of tasks and render it in their own view. This extension keeps the worksheet as the source of truth and appends a timeline lane to each row of the grid. The lane is aligned with the row by construction, so there is no second copy of the data that can drift.
Bars from columns
The configuration maps task fields to column indexes. Dates are ISO strings or calendar columns, progress is 0 to 100, color is any CSS color, and predecessors are the row numbers the task waits for.
gantt({
columns: { label: 0, start: 1, end: 2, progress: 3, color: 4, predecessors: 5 },
width: 480,
daywidth: 16,
});
jspreadsheet.setExtensions({ gantt });
A row with no valid start date gets an empty lane, so headings and notes can sit between tasks.
Editing in both directions
Type a date in a cell and the bar moves, or drag the bar and the cell changes. Drag an edge to resize it, snapped to whole days. Every drag goes through setValue: onchange fires, history records it, and a connected server broadcasts it like any other edit.
Dependencies
Each bar ends in a dot. Drag the dot onto another row and that row number lands in the task's predecessors cell. Arrows run finish-to-start, routed between the rows. Click an arrow to delete it, which is again a cell edit.
Scale, zoom and today
The header shows weeks and days, with today marked and a line down the rows. Day width is fixed, so adding a task does not shift the bars. Drag the header to pan, hold Shift and use the wheel to zoom around the cursor, or drag the right border to show more days.
Self-contained
The extension ships as a single file with its own copy of the rendering runtime and no runtime dependencies. It runs next to any other Jspreadsheet extension and is registered like any of them, with one line.
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/gantt@8/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/gantt@8/dist/style.css" />