ApexCharts > ApexGantt > JavaScript Gantt Chart

Pick Your Stack

ApexGantt ships as a JavaScript library with first-class wrappers for the major web frameworks. If you're using one, the wrapper is the better starting point: a real component with typed props and framework-native event handling. In vanilla JavaScript, or with a framework that has no wrapper, use the core library directly.

React

react-apexgantt

React Gantt Chart →

Angular

ngx-apexgantt

Angular Gantt Chart →

Vue

vue-apexgantt

Vue Gantt Chart →

Vanilla JavaScript

apexgantt

Install below →

Interactive Drag-and-Drop Scheduling

Drag tasks to reschedule, resize bars to change durations, and draw dependency arrows between them, all directly on the timeline. Watch the scripted plan move, then grab a bar yourself.

Critical Path Highlighting

ApexGantt computes the longest chain of dependent tasks that drives your finish date and highlights it automatically. Edit any task and the critical path recomputes. Watch it re-route between the two branches below.

Baselines for Planned vs. Actual

Attach a planned (baseline) range to each task and ApexGantt draws a thin reference bar beneath the live one, so schedule variance is visible at a glance. The demo drifts the actuals past plan to show a slipping project.

Multiple View Modes

Switch between day, week, month, quarter, and year scales to get the right level of detail for your timeline. This one auto-zooms. Interact to take the controls.

Task Dependencies

Finish-to-start, start-to-start, and finish-to-finish links with lag, drawn as arrows.

Milestones

Zero-duration diamond markers for gates, releases, and key dates.

Annotations

Pin sprint boundaries, deadlines, or notes to specific dates or date ranges.

Resizable Sidebar

A fully resizable task list that adapts to long names or more timeline room.

Rich HTML Tooltips

Templatable tooltips showing dates, duration, progress, and dependencies.

Custom Colors & Dark Theme

Light and dark themes built in, plus full control over bar, row, and font colors.

SVG Export

Export timelines to high-quality SVG with every task and dependency preserved.

TypeScript Types

Type definitions ship with the package, so no separate @types install is needed.

Install in Your JavaScript Project

Install via npm:

npm install apexgantt

Or include it directly via CDN, which is handy for prototypes, static sites, server-rendered pages, or any context without a build step:

<script src="https://cdn.jsdelivr.net/npm/apexgantt"></script>

The package ships TypeScript definitions, so the same install works for both JavaScript and TypeScript projects.

Quick Start

A complete working Gantt chart in a single script:

<div id="gantt"></div>

<script type="module">
  import ApexGantt from "apexgantt"

  const series = [
    { id: "task-1", name: "Design",      startTime: "01-01-2026", endTime: "01-15-2026" },
    { id: "task-2", name: "Development", startTime: "01-16-2026", endTime: "02-28-2026", dependency: "task-1" },
    { id: "task-3", name: "QA",          startTime: "03-01-2026", endTime: "03-15-2026", dependency: "task-2" }
  ]

  const gantt = new ApexGantt(document.getElementById("gantt"), { series, viewMode: "week" })
  gantt.render()
</script>

Dependencies render as arrows between predecessor and successor tasks. The viewMode option ("day", "week", "month", "quarter", "year") sets the timeline scale; change it at runtime via the chart instance.

Commercial License Setup

If you have a commercial ApexGantt license, set it once at application start, before rendering any charts:

import ApexGantt from "apexgantt"

ApexGantt.setLicense("your-license-key-here")

// then render charts as normal

The community edition runs without a license key.

Performance with Large Project Timelines

ApexGantt renders large project timelines quickly. On an Apple M4 Pro (apexgantt 3.11.1, headless Chromium):

~65 ms1,000 tasks
~275 ms5,000 tasks
~620 ms10,000 tasks
ApexGantt across all frameworksGitHubnpm

JavaScript Gantt Chart FAQ

How do I install ApexGantt in a JavaScript project?

Run npm install apexgantt, then import ApexGantt from "apexgantt". For projects without a build step, include it via CDN: <script src="https://cdn.jsdelivr.net/npm/apexgantt"></script>.

Does ApexGantt require a framework like React or Angular?

No. ApexGantt's core is a JavaScript library you can use in any web context: vanilla JS, Svelte, Solid, Preact, Astro, jQuery legacy applications, server-rendered pages, browser extensions, and Electron apps. If you happen to use React, Angular, or Vue, dedicated wrappers are available for those frameworks.

Does ApexGantt support TypeScript?

Yes. TypeScript definitions ship with the apexgantt package, so no @types/ install is required. The same package works for both JavaScript and TypeScript projects.

How do I use ApexGantt with a framework that doesn't have a dedicated wrapper?

Use the core apexgantt package the same way you would in vanilla JavaScript. Render the chart into a DOM node in your component's lifecycle hook (for example, onMount in Svelte, mounted in Vue Options API, or useEffect in Preact), and call .destroy() on the chart instance during cleanup.

Does ApexGantt support critical path, baselines, and annotations?

Yes. Critical path highlighting, baselines (planned-vs-actual), and date-range annotations are all built into the core library and configurable through the standard options object. Worked demos live at /apexgantt/demos/.

How do I export an ApexGantt chart?

ApexGantt exports charts as high-quality SVG files, preserving tasks, dependencies, milestones, progress, annotations, and theme. Export is a built-in toolbar button (shown by default; toggle it with the enableExport option). There is no separate export method to call.

Ready to build your project timeline?

The fastest path is the demos: running examples you can read and copy from.

See ApexGantt Demos
JavaScript Gantt Chart Library | ApexGantt