Angular Gantt Chart Component for Project Timelines

Install in Your Angular App

ApexGantt for Angular requires two packages: the Angular wrapper and the core engine.

npm install ngx-apexgantt apexgantt
# or
yarn add ngx-apexgantt apexgantt

A complete working Gantt chart in one standalone component:

import { Component } from "@angular/core"
import { NgxApexGanttComponent, TaskInput } from "ngx-apexgantt"

@Component({
  selector: "app-timeline",
  standalone: true,
  imports: [NgxApexGanttComponent],
  template: `
    <ngx-apexgantt
      [tasks]="tasks"
      [viewMode]="'week'"
      [height]="'500px'"
    ></ngx-apexgantt>
  `
})
export class TimelineComponent {
  tasks: TaskInput[] = [
    { id: "task-1", name: "Design",      startTime: "01-01-2026", endTime: "01-15-2026", progress: 75 },
    { id: "task-2", name: "Development", startTime: "01-16-2026", endTime: "02-28-2026", progress: 40, dependency: "task-1" },
    { id: "task-3", name: "QA",          startTime: "03-01-2026", endTime: "03-15-2026", progress: 0,  dependency: "task-2" }
  ]
}

For a module-based app, import NgxApexGanttModule into the relevant @NgModule instead. The viewMode Input accepts "day", "week", "month", "quarter", or "year".

Working with @ViewChild and Events

ApexGantt's Outputs keep your Angular state in sync with the timeline, and a @ViewChild reference drives the chart imperatively when you need it:

import { Component, ViewChild } from "@angular/core"
import {
  NgxApexGanttComponent,
  TaskInput,
  TaskDraggedEventDetail,
  TaskResizedEventDetail,
  TaskUpdateSuccessEventDetail
} from "ngx-apexgantt"

@Component({
  selector: "app-schedule-editor",
  standalone: true,
  imports: [NgxApexGanttComponent],
  template: `
    <button (click)="ganttChart.zoomIn()">Zoom In</button>
    <button (click)="ganttChart.zoomOut()">Zoom Out</button>

    <ngx-apexgantt
      #ganttChart
      [tasks]="tasks"
      [viewMode]="'week'"
      [height]="'600px'"
      (taskDragged)="onTaskDragged($event)"
      (taskResized)="onTaskResized($event)"
      (taskUpdateSuccess)="onTaskUpdateSuccess($event)"
    ></ngx-apexgantt>
  `
})
export class ScheduleEditorComponent {
  @ViewChild("ganttChart") ganttChart!: NgxApexGanttComponent

  tasks: TaskInput[] = [/* ... */]

  onTaskDragged(event: TaskDraggedEventDetail) { console.log("dragged", event) }
  onTaskResized(event: TaskResizedEventDetail) { console.log("resized", event) }
  onTaskUpdateSuccess(event: TaskUpdateSuccessEventDetail) {
    // persist to your backend
    fetch(`/api/tasks/${event.taskId}`, { method: "PATCH", body: JSON.stringify(event.updatedTask) })
  }
}

v1.1.0 exposes three Outputs (taskUpdateSuccess, taskDragged, taskResized) and the @ViewChild methods update, updateTask, zoomIn, zoomOut, and destroy. Payloads match the shipped detail types: taskUpdateSuccess carries { taskId, updatedTask, timestamp }.

Customization, Theming, and Columns

Bind [theme]="'dark'" for a one-line theme switch. For deeper control, pass a GanttOptions object through the options Input and configure the task table with columnConfig and the ColumnKey enum:

import { GanttOptions, ColumnKey } from "ngx-apexgantt"

ganttOptions: GanttOptions = {
  series: this.tasks,
  enableToolbar: true,
  enableTaskDrag: true,
  enableTaskResize: true,
  barBackgroundColor: "#537CFA",
  rowHeight: 32,
  columnConfig: [
    { key: ColumnKey.Name,      title: "Task Name", minWidth: "100px", flexGrow: 3 },
    { key: ColumnKey.StartTime, title: "Start",     minWidth: "100px", flexGrow: 1.5 },
    { key: ColumnKey.Duration,  title: "Duration",  minWidth: "80px",  flexGrow: 1 }
  ]
}

Mapping Your API Shape Inline

API responses rarely match the field names ApexGantt expects. Add a parsing config inside GanttOptions to map your shape without hand-written transformation code:

ganttOptions: GanttOptions = {
  series: this.apiData,  // raw API response
  parsing: {
    id:        "task_id",
    name:      "task_name",
    startTime: "start_date",
    endTime:   "end_date",
    progress:  "completion"
  },
  height: "500px"
}

TypeScript Support in Angular

ngx-apexgantt ships TypeScript definitions for the component, the task data model, configuration, view modes, the column-key enum, and the event detail types:

import {
  NgxApexGanttComponent,
  GanttOptions,
  TaskInput,
  ViewMode,
  ColumnKey,
  TaskUpdateSuccessEventDetail,
  TaskDraggedEventDetail
} from "ngx-apexgantt"

ngx-apexgantt v1.1.0 targets Angular 18 (@angular/core and @angular/common ^18.0.0 peer dependencies).

Commercial License Setup

If you have a commercial ApexGantt license, set it once with the static setter, called before bootstrapApplication:

// main.ts
import { bootstrapApplication } from "@angular/platform-browser"
import { setApexGanttLicense } from "ngx-apexgantt"
import { AppComponent } from "./app/app.component"
import { appConfig } from "./app/app.config"

setApexGanttLicense("your-license-key-here")
bootstrapApplication(AppComponent, appConfig)

The community edition runs without a license key.