the project plan

JavaScript Gantt Chart and Project Planning

A task list that draws its own schedule. Give the plan its tasks and how they depend on one another and it works out when each can start and finish, how much slack it has, and which tasks have none. That run is the critical path, drawn in red so the risk in the plan is the first thing you see.

Try the Gantt Free on localhost

Building…

Loading a live grid…

Also in your licence

who is booked too much

Put people on the plan and see the overload.

Assign people to tasks and the plan outlines the bars that clash and rings the avatar of anyone booked past what they can do. Level the plan in one press and lower-priority work shifts later.

Building…

Loading a live grid…

what the plan gives you

A real project plan, in the box.

The critical path, computed

The schedule engine works out every task's earliest and latest start and finish and its slack, then draws the zero-slack run in red. Change anything and it recomputes, so the critical path is always the current one.

The four dependency links

Tasks depend on one another in each of the four standard ways, from finish-to-start through to start-to-finish, each with an optional lead or lag, and the arrows between the bars show how the plan holds together.

Milestones and summaries

A milestone sits as a diamond on the date it marks. A task made the parent of others becomes a summary rolled up from its children, its window and its progress derived from the work underneath it.

Progress and today

Each bar fills to show how far along its task is, and the timeline runs on a calendar axis with a line marking today and weekends shaded, so the state of the plan reads at a glance and a task slipping behind is easy to spot.

Edit from the keyboard too

Focus a bar and the arrows move it, the shift key resizes it, and one key links two tasks. Every task carries a spoken description of its dates, progress and slack, and every edit is announced, so the plan is usable without a mouse.

Take it out of the page

Write the scheduled tasks out as a spreadsheet, or hand off the drawn chart as an image. The split view prints, saves as a PDF and exports as PNG or SVG with its resource bands included, so the plan on the screen becomes the plan in the status report without a second tool. Leveling a busy plan finishes in milliseconds.

Working calendars and a resource histogram

Give each person their own working days, hours and leave. A histogram band beneath the plan shows workload per person in hours, percent of capacity or cost, with a capacity line and the overload picked out.

Schedule by effort or by duration

Hold the duration, the effort or the units fixed per task. Add a person to a fixed-effort task and it finishes sooner; give it to a part-timer and it runs longer.

Every MS Project date constraint

Start or finish no earlier than, start or finish no later than, must start on, must finish on, as soon as possible and as late as possible. A task that misses a ceiling is reported and marked on its bar.

Assign people with a warning first

Search your people, set each share and see their load over the task's dates. An over-allocation is flagged before you commit, and one Apply is one change.

Rates, cost and the S-curve

Price people per hour, materials per unit and flat costs, and watch cost roll up from tasks to the whole project. The S-curve charts planned value, earned value and actual cost, and a progress line shows where each task really is.

Undo and redo, everywhere

Every move, resize, cell edit, link, assignment and even a whole leveling run undoes in one step, from the keyboard or from code.

Because the plan is built from the tasks a grid already holds, the same live source that fills your grids can fill the plan too, and each change recomputes the schedule and redraws it, so the timeline stays current as the work moves.

Drag a bar, or edit a cell

Drag a bar to move a task, or its edge to make it shorter or longer, and the new dates are written back to the row. In the split view the task grid and the timeline share one row, so you can double-click a cell and edit a name, an assignee or a date in place and the bar keeps up. Hover a bar and its dependency chain lights up, so you can see at a glance what a task waits on and what waits on it. The task list and the timeline are one plan seen two ways.

Honest about trouble

A task dragged earlier than its dependencies allow is flagged rather than quietly moved, so you see the conflict instead of shipping it. Anything running late is marked, and a deadline you set turns a slip into a warning you can act on.

a plan from a task list

The wiring reads the way the plan looks.

Drop in two script tags, then hand createGantt your tasks and how they depend on one another. Call mount to draw the timeline, turn on editable for drag-editing, and bind a task grid so a drag writes the dates back and an edit in the grid redraws the bar.

On a phone or tablet, press and hold a bar or one of its handles to move or resize it, and a swipe still scrolls the timeline. Pinch with two fingers to zoom the time axis in or out.

The Gantt is a separate, opt-in module with a global of its own. It changes nothing in the grid core and a page that never shows a plan never loads it. See its size next to every other module in the module map.

See the full Gantt API →

<!-- the grid and the gantt module, as globals -->
<script src="https://cdn.latticegrid.dev/lattice-grid@1.110.1/lattice-grid.min.js"></script>
<script src="https://cdn.latticegrid.dev/lattice-grid@1.110.1/modules/gantt.min.js"></script>

<script>
  var createGantt = LatticeGridGantt.createGantt;

  // Give it tasks and how they depend on one another; it works out the schedule.
  var plan = createGantt({
    tasks: [
      { id: 'design', name: 'Design', duration: 5, percentComplete: 100 },
      { id: 'build',  name: 'Build',  duration: 8, percentComplete: 40 },
      { id: 'launch', name: 'Launch', milestone: true }
    ],
    dependencies: [
      { from: 'design', to: 'build',  type: 'FS' },   // finish-to-start
      { from: 'build',  to: 'launch', type: 'FS' }
    ]
  });

  // Draw it, and let a drag on a bar edit the dates.
  plan.mount(document.querySelector('#plan'), {
    editable: true,
    today: 20340,           // the today line
    dateAxis: true,         // axis ticks as calendar dates
    nonWorking: 'weekends'  // shade Saturdays and Sundays
  });
</script>

demos

Run it, then change it.

Gantt chart
Drag the bars, set the four link types and watch the critical path move.
Split view
The task tree and the timeline as one row-aligned surface.
Resource management
Overallocation shown on the plan, then levelled in one press.
Microsoft Project files
Read a Project XML file into a schedule and write it back out.
Kanban board
The same rows as cards in status columns.

All demos →

docs

The API, the htmx page and the board view.

Gantt API
createGantt, the task and dependency types and the schedule it returns.
Gantt with htmx
A plan on a server-rendered page, with no build step.
Resource scheduler
When you need a roster of people rather than a plan.
Kanban board
The same rows as a board.

JavaScript Gantt Chart and Project Planning

Put people on the plan and see the overload.

A real project plan, in the box.

The critical path, computed

The four dependency links

Milestones and summaries

Progress and today

Edit from the keyboard too

Take it out of the page

Working calendars and a resource histogram

Schedule by effort or by duration

Every MS Project date constraint

Assign people with a warning first

Rates, cost and the S-curve

Undo and redo, everywhere

Drag a bar, or edit a cell

Honest about trouble

The wiring reads the way the plan looks.

Run it, then change it.

The API, the htmx page and the board view.

Also in the licence