Installation & Usage

ApexGantt is a JavaScript Gantt chart library. It renders interactive project timelines with tasks, subtasks, dependencies, progress tracking, and drag-and-drop scheduling.

Installation

npm

npm install apexgantt

import ApexGantt from 'apexgantt'

CDN

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

When loaded via CDN, ApexGantt is available as a global variable.

License

ApexGantt requires a license key to remove the watermark. Set the key before creating any chart instance:

import ApexGantt from 'apexgantt'

ApexGantt.setLicense('YOUR-LICENSE-KEY')

Call setLicense once at application startup, before any new ApexGantt(...) calls. The key is validated client-side; no network request is made. See Setting the License for purchase and environment variable patterns.

Creating your first chart

Provide a container element and a configuration object. The minimum required fields per task are id, name, startTime, and endTime.

<div id="gantt" style="height: 400px;"></div>

import ApexGantt from 'apexgantt'

ApexGantt.setLicense('YOUR-LICENSE-KEY')

const gantt = new ApexGantt(document.getElementById('gantt'), {
  series: [
    {
      id: 'phase-1',
      name: 'Phase 1: Research',
      startTime: '2024-03-01',
      endTime: '2024-03-15',
      progress: 100,
    },
    {
      id: 'task-1',
      name: 'User interviews',
      startTime: '2024-03-01',
      endTime: '2024-03-08',
      parentId: 'phase-1',
      progress: 100,
    },
    {
      id: 'task-2',
      name: 'Competitive analysis',
      startTime: '2024-03-06',
      endTime: '2024-03-14',
      parentId: 'phase-1',
      progress: 80,
    },
    {
      id: 'phase-2',
      name: 'Phase 2: Design',
      startTime: '2024-03-15',
      endTime: '2024-04-05',
      progress: 40,
    },
    {
      id: 'task-3',
      name: 'Wireframes',
      startTime: '2024-03-15',
      endTime: '2024-03-25',
      parentId: 'phase-2',
      progress: 90,
    },
    {
      id: 'task-4',
      name: 'Visual design',
      startTime: '2024-03-22',
      endTime: '2024-04-05',
      parentId: 'phase-2',
      progress: 10,
    },
  ],
})

gantt.render()

This renders a two-level hierarchy: two summary rows (Phase 1 and Phase 2) each containing subtasks. The parentId field links a task to its parent by id.

Task fields

FieldTypeRequiredDescription
idstringYesUnique identifier within the chart
namestringYesLabel shown in the task list column
startTimestringYesTask start date ('YYYY-MM-DD' by default)
endTimestringYesTask end date (exclusive)
progressnumberNoCompletion percentage, 0-100
parentIdstringNoid of the parent task; creates a hierarchy
dependencystring | string[]Noid (or array of ids) this task depends on

Date format

The default date format is 'YYYY-MM-DD'. To use a different format, set parsing.dateFormat:

const gantt = new ApexGantt(el, {
  series: [...],
  parsing: {
    dateFormat: 'MM/DD/YYYY'
  }
})

To enable sub-day scheduling, include time tokens:

parsing: {
  dateFormat: 'YYYY-MM-DD HH:mm'
}

Rendering and cleanup

render() is asynchronous and returns a Promise:

gantt.render().then(() => {
  console.log('chart mounted')
})

Call destroy() when you remove the chart from the DOM, such as when a framework component unmounts:

gantt.destroy()

Next steps