Examples

Every example runs on this page, in vanilla JavaScript and in React, and shows the files that make it up: the data, the options and the code. They are the files of theexamples/ folder of the repository, copy them into a project.

Basics

Basic chartFour tasks, three links, two event handlers and a few methods, with the vanilla renderer and with React.

Time scale

View modesThe seven zoom presets of the timeline, from hours to years, switched with a select and refined with zoomTo.

Custom view modesA fortnight sprint view and a quarter view of your own, and overrides of the day and week presets, all from the viewModes option.

Scrolling and todayWhere the chart opens, how code scrolls it to today, a date or a task, the today marker, and the visible range reported as you scroll.

Infinite timelineA timeline that grows as you scroll past its ends, with its threshold, step, longest span and bounds, and every change of its range reported by onRangeChange.

Highlighted daysDays marked for the eye as dates, ranges and rules, with labels and colours, and how the weekends and holidays are drawn.

Layout and sizesRow, bar, corner and header sizes with live sliders, and a chart of a fixed height next to one that is as tall as its rows.

A large planUp to ten thousand generated tasks with their links, a count selector, and the time the chart takes to put its first bars on the screen.

Scheduling

Link types and lagsFinish-to-start, start-to-start, finish-to-finish and start-to-finish links, each with a lag and a lead; drag the source and watch every type follow.

Propagation and conflictsWhat an edit does to the tasks linked to it, with propagation on or off, and the conflict a link reports when its successor starts too early.

Groups and childrenPhases with children that you expand and collapse, and what moves the children when a phase moves (moveChildren, followParent, parentAnchor), with the outside-parent conflict.

Working calendarWeekends, a named holiday, a worked Saturday and a custom rule, durations counted in working or in calendar days, and drags that skip the days off.

Working days at one-hour granularityA Monday-to-Friday calendar with a named holiday, tasks timed to the hour, a lag, and a before-hook that asks before a bar lands on a day off.

Granularity and snappingThe data step (granularity), the step a drag snaps to in each view mode, what happens to a value that is not a multiple of the step (alignInput), and Alt to snap to the data step.

Milestones and placeholdersMilestones that are points in time, drawn as diamonds and linked like tasks, and placeholder rows that have no bar, as headings and as work that is not scheduled yet.

ProgressDragging the progress handle, what a resize does to the progress (progressAnchor), a colour of its own, and a boundary that skips the days off; with the progress events in the status line.

IssuesDeliberately bad data and options, and the list of issues the chart reports for them, drawn beside it from getIssues() and kept up to date by onIssues.

Data

Controlled dataYour own state owns the tasks and the links; the chart reports every change and waits for your answer, a save that can be refused.

Edit session, Save and CancelYour state owns the plan; an edit session wraps a spell of editing between Edit, Save and Cancel, with a save that can be refused.

Data formatsEvery way to write the dates, durations, precision and links of a task, side by side, and how the chart reads each of them.

Editing

Read-only and partial editingTurn editing off for the whole chart or one kind of edit at a time, lock a task, forbid links to another, and read what the chart refuses from onEditRefused.

Link editingDraw dependencies by dragging or by click-click, remove them from the menu of a link, turn it all off with editing.links, and hear about each with onLinkCreate and onLinkDelete.

SelectionSelect tasks from code, with a click or from the keyboard, select a link by clicking its arrow, read both from onSelectionChange, and show the record getTask returns in a side panel.

Keyboard editingMove and resize tasks with the arrow keys, hear the result in a live region, and see what a keyboard change reports to onTasksChange.

Programmatic updatesChange tasks and links from code with updateTask, addLink, removeLink and setTasks, and read what each call resolves to, including rejected, unchanged and cancelled.

Before-hooksVeto, rewrite or delay a change with onBeforeTaskChange, refuse a link with onBeforeLinkCreate, and see the chart stay busy while a hook has not answered.

Undo and redoTurn the history on, wire Undo and Redo buttons and the Ctrl or Cmd + Z keys (keyboard.undo) to undo() and redo(), and watch canUndo, canRedo, the limit and onHistoryChange.

Events logEvery public event of a chart, logged live with its payload, a filter by kind, and the buttons and gestures that make each one fire.

Customization

ThemingSwitch between the light, dark and automatic themes, and re-style one chart with --gantt-* custom properties, in three presets for a brand palette, a compact density and high contrast.

UnstyledA chart styled from scratch, without the default stylesheet, using only the documented classes, data attributes and custom properties.

Task colours and classesStyle bars and rows by status with task.className and task.rowClassName and your own stylesheet, or with task.color and task.progressColor from the data, and stripe the rows.

Bar labelsWhere a bar's label goes (inside, outside, automatic or none) and what it says, as text, a DOM node, a disposable node or a React element, for example an avatar and a name.

Custom tooltipThe tooltip of a task as text sections, as a DOM node, and as a React component, none of it parsed as HTML by accident.

Link gaps in a tooltipA tooltip with one row for each predecessor of a task, saying how far the task sits from it, measured between the bars and true during a drag.

Link menuThe menu a click on an arrow opens, with your own actions to change the type, change the lag or remove, and your own handler for the remove action.

Locale and stringsSwitch the locale of the chart (header, dates and numbers) and override every text it writes with the strings option, with a full Ukrainian set as the example.

Grid and todayGrid lines, days off, the today line and the major lines of each view mode, with hover and selection styles set from tokens.

Task listThe built-in list of tasks beside the chart, with columns, toggles, a splitter, selection, hover, the keyboard and scrolling kept in sync.

Task list beside the chartA list of your own on the left of the chart, drawn by hand from the public API, with rows that line up with the bars, toggles, selection, hover and the keyboard.

React

The ref handleEvery method of a chart from buttons, through the ref of the Gantt component - view mode, scrolling, selection, updates, undo and redo, and an edit session.

useGantt and useGanttStateA chart made with useGantt and a toolbar outside it, driven by useGanttState - the view mode, undo and redo, the dates in view and the edit session.

GanttRoot, GanttChart and useGanttBarA chart, a task list, a toolbar and a panel that follows the selected bar, as separate components that share one chart through GanttRoot, with no prop to hand it down.

Controlled stateTasks, links, view mode, selection and open phases all live in your own reducer and the chart follows, with patchTasks and an inspector that shows the state change.

Slots as ReactThe tooltip, the link menu and the label of a bar as React components that read your context, with a slotKey for functions that differ and errors reported to onError.

Plans

A release planPhases with children pinned to them, a milestone, locked work, links with leads and lags, a work calendar, and status colours from your own CSS.