A Gantt chart library that stays out of your stack

GanttKit is a Gantt chart library for web applications. A headless core owns the data model, time scale, layout geometry and interaction logic. It never touches the DOM, so the same library works in plain JavaScript, in any UI framework, and in Node during tests.

What a Gantt chart library actually has to do

Drawing bars is the easy part. The work that makes a Gantt chart library worth installing sits underneath:

• Time scale. Map dates to pixels across day, week and month view modes, and keep the header grid aligned with the bars while zooming.
• Layout geometry. Turn every task into a rectangle with the right row, offset, width and padding, including milestones that collapse to a single point.
• Virtualization. Emit only what the scroll viewport can show, otherwise a few thousand tasks freeze the main thread.
• Interaction. Hit testing, drag to move, drag to resize, rubber-band selection, and preview state that can be cancelled without corrupting the data.
• Scheduling rules. Finish-to-start dependencies that shift dependents when a predecessor moves.
• Presentation. Theming, localized dates, tooltips, a sidebar of columns, and a toolbar.

Most libraries bundle all of that into one widget. GanttKit splits it: the core computes, plugins extend, and a renderer paints.

Headless core versus monolithic widget

What you install

Everything is published under the @ganttkit scope. Pick a renderer, then add feature plugins one by one. Every package ships ESM and CJS builds with TypeScript types.

A chart in fifteen lines

import { createGantt } from '@ganttkit/svg'
import '@ganttkit/svg/styles.css'

const gantt = createGantt({
  target: '#chart',
  theme: 'dark',
  viewMode: 'Week',
  rows: [
    {
      id: 'design',
      name: 'Design',
      tasks: [
        { id: 't1', name: 'Wireframes', start: '2026-07-01', end: '2026-07-08', progress: 1 },
        { id: 't2', name: 'Mockups', start: '2026-07-09', end: '2026-07-20', progress: 0.4 },
      ],
    },
  ],
})

Need the sidebar, a tree, or dependencies? Build the engine explicitly and call use() for each plugin. Nothing is registered globally and nothing is hidden behind a config file.

Performance at twenty thousand tasks

The engine runs two passes. The expensive pass recomputes rows, time scale and layout when data changes. The cheap pass rebuilds only the windowed scene on scroll, coalesced to the animation frame.

How to choose a Gantt chart library

Whatever you pick, these are the questions worth asking before the integration is hard to reverse:

1. License. Is it usable commercially without a key, a seat count, or a per-developer fee?
2. Framework coupling. If you migrate frameworks in two years, does the chart survive?
3. Bundle cost. Do unused features ship anyway, or can the bundler drop them?
4. Types. Are TypeScript definitions shipped and accurate, or community-maintained?
5. Virtualization. Does it survive your worst realistic dataset, not the marketing demo?
6. Extensibility. When you need a behavior the vendor did not anticipate, is there a documented extension point?
7. Testability. Can you assert on layout without booting a browser?

Keep reading

Frequently asked questions