ApexCharts > ApexGantt

Pick Your Framework

ApexGantt ships first-class wrappers for five frameworks. Each has its own guide, demos, and GitHub repository. Pick the stack you actually run.

JavaScript

apexgantt

JavaScript Gantt Chart →View on GitHub →

React

react-apexgantt

React Gantt Chart →View on GitHub →

Angular

ngx-apexgantt

Angular Gantt Chart →View on GitHub →

Vue

vue-apexgantt

Vue Gantt Chart →View on GitHub →

Blazor

Blazor-ApexGantt

Blazor Gantt Chart →

Interactive Timeline Management

Drag tasks to reschedule, resize bars to change duration, draw dependency arrows, and reorder rows, all directly on the timeline. ApexGantt is built for project managers and operations teams that need to manipulate schedules, not just view them. Every change emits an event your application can hook to persist updates or run downstream automation.

Critical Path Highlighting

The longest sequence of dependent tasks is highlighted automatically, so project managers see at a glance which delays push the end date out. The critical path recomputes as the schedule changes, and the same option works across every framework wrapper. Watch it re-route between the two branches below.

Baselines for Planned vs. Actual

Plot the original planned schedule alongside the live timeline to track schedule drift over the life of a project. A thin baseline bar sits beneath each task bar, so 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 view modes without re-querying or re-rendering the dataset. The same data source serves daily standup detail, sprint planning, monthly status reviews, and quarter-level executive timelines. This one auto-zooms. Interact to take the controls.

Task Dependencies

Predecessor and successor links render as arrows and travel in the same task data across every wrapper.

Milestones

Zero-duration diamond markers (type: "milestone") for gates, releases, and key dates.

Annotations

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

Resizable Sidebar

A resizable task list that adapts to long names or more timeline room; the split persists per session.

Rich HTML Tooltips

Fully templatable HTML tooltips showing dates, duration, progress, and any custom field.

Customization & Theming

Theme variables, CSS overrides, and light/dark themes, applied identically across frameworks.

SVG Export

Export the full timeline to high-quality SVG with every task and dependency preserved.

TypeScript Types

Type definitions ship with the core and every wrapper, so no separate @types install is needed.

One Gantt Chart Component, Every Major Framework

Most Gantt chart libraries are locked to a single framework or sold as separate products per framework. ApexGantt is a single component with first-class support for JavaScript, React, Angular, Vue, and Blazor, backed by one core engine and one data model. That matters in three situations:

When your stack is mixed.

Teams running Angular for an admin console and React for a customer-facing app can use the same Gantt component in both, with the same task data shape and the same configuration API.

When your stack changes.

Migrating from one framework to another does not mean re-evaluating your Gantt chart library. The component travels with you.

When you license once.

A single licensing model covers all framework wrappers, with no separate per-framework SKUs.

Tasks, Dependencies, and Milestones

ApexGantt accepts a flat task array. Identifiers, start and end times, dependencies, and progress are all part of the standard task object, and the same shape works across every framework wrapper.

{
  "id": "task-1",
  "name": "Design Phase",
  "startTime": "01-01-2026",
  "endTime": "01-15-2026",
  "progress": 45,
  "dependency": "task-0"
}

Dependencies are declared by referencing a predecessor id and render as arrows between task bars. Progress is a percentage (0–100) that fills bars proportionally. Dates use the MM-DD-YYYY string format. A milestone is a task with type: "milestone", which renders as a zero-duration diamond marker. Because the data model is identical across wrappers, task data is portable between frameworks if your stack changes.

Why Teams Choose ApexGantt

ApexGantt is a single Gantt chart component designed for project timeline interaction, with first-class wrappers for every major web framework. Same engine, same data model, same configuration API.

ApexGantt Capabilities by Framework

CapabilityJavaScriptReactAngularVueBlazor
Native component wrapper
Consistent task data model
TypeScript typesn/a
Task dependencies
Milestones–
Drag-and-drop scheduling
Resize and reschedule
Multiple view modes (day, week, month, quarter, year)
Custom HTML tooltips–
Resizable sidebar
Theming and CSS customization
SVG export

Blazor (Blazor-ApexGantt) is verified shipping (NuGet v1.2.0, .NET 9). Two rows show a dash because they are not yet confirmed in the Blazor wrapper: a type: "milestone" field and custom HTML tooltips are not documented in its README, and rich event callbacks are on its roadmap. The n/a for TypeScript types reflects that Blazor uses type-safe C# models instead.

What to Look For in a Gantt Chart Component

Use this checklist when evaluating Gantt chart libraries, for ApexGantt or anything else.

  • Framework alignment. Does the library ship a real component for your framework, or just a JavaScript wrapper you integrate by hand?

    ApexGantt: dedicated wrappers for JavaScript, React, Angular, Vue, and Blazor.

  • Data model portability. If you migrate frameworks later, will your task data still work?

    ApexGantt: identical task JSON across every wrapper.

  • Interaction depth. Can users drag, resize, and create dependencies directly on the chart, or is it read-only?

    ApexGantt: full drag-and-drop scheduling with dependency drawing.

  • Scheduling semantics. Are dependencies, milestones, and progress first-class concepts in the data model, or bolted on?

    ApexGantt: all three, in the standard task object.

  • View flexibility. Can users switch between daily standup detail and quarterly executive views without rebuilding the chart?

    ApexGantt: day, week, month, quarter, and year view modes, switched at runtime.

  • Customization surface. Can you style and template the chart to match your product?

    ApexGantt: theme variables, CSS overrides, templatable tooltip HTML.

  • Reporting and export. Can the chart leave the application for documentation, status decks, or stakeholder reports?

    ApexGantt: high-quality SVG export with all task detail preserved.

  • Licensing model. Does the license cover every framework your team uses, or does each framework cost extra?

    ApexGantt: single license, all frameworks included.

Quick Install in Your Framework

The task data model is identical across wrappers. The integration syntax differs. Pick yours below, then follow the framework guide for complete examples.

JavaScript logo

ApexGantt for JavaScript apexgantt

npm install apexgantt
import ApexGantt from "apexgantt"

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

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

Full JavaScript Gantt Chart guide →

React logo

ApexGantt for React react-apexgantt apexgantt

npm install react-apexgantt apexgantt
import { ApexGanttChart } from "react-apexgantt"

export default function ProjectTimeline({ tasks }) {
  return <ApexGanttChart tasks={tasks} viewMode="week" height="500px" />
}

Full React Gantt Chart guide →

Angular logo

ApexGantt for Angular ngx-apexgantt apexgantt

npm install ngx-apexgantt apexgantt
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" },
    { id: "task-2", name: "Build",  startTime: "01-16-2026", endTime: "02-28-2026", dependency: "task-1" }
  ]
}

Full Angular Gantt Chart guide →

Vue logo

ApexGantt for Vue vue-apexgantt apexgantt

npm install vue-apexgantt apexgantt
<template>
  <ApexGanttChart :tasks="tasks" view-mode="week" height="500px" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ApexGanttChart } from "vue-apexgantt"
import type { TaskInput } from "vue-apexgantt"

const tasks = ref<TaskInput[]>([
  { id: "task-1", name: "Design", startTime: "01-01-2026", endTime: "01-15-2026" },
  { id: "task-2", name: "Build",  startTime: "01-16-2026", endTime: "02-28-2026", dependency: "task-1" }
])
</script>

Full Vue Gantt Chart guide →

Blazor logo

ApexGantt for Blazor Blazor-ApexGantt (NuGet)

dotnet add package Blazor-ApexGantt

Load the core JS once, in index.html (WebAssembly) or _Host.cshtml (Server):

<script src="https://cdn.jsdelivr.net/npm/apexgantt@latest/dist/apexgantt.min.js"></script>
@using Blazor_ApexGantt.Components
@using Blazor_ApexGantt.Models

<ApexGantt Options="@options" Tasks="@tasks" />

@code {
    private GanttOptions options = new() { Width = "100%", Height = "500px", ViewMode = "week" };

    private List<GanttTask> tasks = new()
    {
        new GanttTask { Id = "task-1", Name = "Design", StartTime = new DateTime(2026, 1, 1), EndTime = new DateTime(2026, 1, 15), Progress = 45 },
        new GanttTask { Id = "task-2", Name = "Build",  StartTime = new DateTime(2026, 1, 16), EndTime = new DateTime(2026, 2, 28), Dependency = "task-1" }
    };
}

In Blazor, StartTime/EndTime are C# DateTime values, not the MM-DD-YYYY strings the JavaScript core uses.

Blazor-ApexGantt on GitHub →

ApexGantt FAQ

Which frameworks does ApexGantt support?

ApexGantt ships first-class component wrappers for JavaScript (apexgantt), React (react-apexgantt), Angular (ngx-apexgantt), Vue (vue-apexgantt), and Blazor (Blazor-ApexGantt). The core rendering engine is shared, so the task data model, configuration API, and visual output stay consistent regardless of which wrapper you use.

Does ApexGantt support task dependencies and milestones?

Yes. Dependencies render as arrows between predecessor and successor tasks, and milestones display as diamond markers on the timeline. Both are part of the standard task data model and require no additional configuration.

Can ApexGantt handle large project timelines?

Yes. In a benchmark on an Apple M4 Pro, ApexGantt rendered a 5,000-task timeline in about 275 ms and a 10,000-task timeline in about 620 ms (apexgantt 3.11.1).

How do I export a Gantt chart from ApexGantt?

ApexGantt exports the full timeline as a high-quality SVG file, preserving tasks, dependencies, milestones, progress, and annotations. SVG scales without artifacts and embeds cleanly in PDFs, status decks, and stakeholder reports.

Does ApexGantt support TypeScript?

Yes. The JavaScript core (apexgantt) ships its own apexgantt.d.ts, and the React, Angular, and Vue wrappers ship TypeScript type definitions for the public API, task data model (TaskInput), and configuration options (GanttUserOptions).

How is ApexGantt licensed?

ApexGantt is a commercial component. You can evaluate it for free: charts render with an "ApexCharts" watermark until you apply a license key. A commercial license removes the watermark and covers production use. See the pricing page for current plans and to get a key, then set it once at startup with setApexGanttLicense() (or ApexGantt.setLicense() for vanilla JS).

What makes ApexGantt different from other Gantt chart libraries?

ApexGantt is the only Gantt chart component with first-class support for JavaScript, React, Angular, Vue, and Blazor under a single consistent API. Most alternatives are either locked to one framework, sold as separate products per framework, or extracted from larger project-management platforms. ApexGantt is built ground-up for project timeline interaction and ships the same behavior across every framework wrapper.

See ApexGantt in Your Framework

Browse the live demos, or jump straight to your framework guide above.

Browse all demos
ApexGantt: Gantt Chart for JS, React, Angular, Vue, Blazor