React Gantt Chart Component for Project Timelines

Install in Your React App

ApexGantt for React requires two packages: the React wrapper and the core engine. Install both:

npm install react-apexgantt apexgantt
# or
pnpm add react-apexgantt apexgantt
# or
yarn add react-apexgantt apexgantt

Import the component and pass a tasks array:

import React from "react"
import { ApexGanttChart } from "react-apexgantt"

export default function ProjectTimeline() {
  const tasks = [
    { 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" }
  ]

  return <ApexGanttChart tasks={tasks} viewMode="week" height="500px" />
}

That's a complete, working React Gantt chart. Dependencies render as arrows between tasks. The viewMode prop accepts "day", "week", "month", "quarter", or "year".

Working with React State and Events

ApexGantt's event callbacks keep your React state in sync with whatever the user does on the timeline. Drag a task and onTaskDragged fires; resize one and onTaskResized fires; finish an edit and onTaskUpdateSuccess fires with the resolved task.

import { useRef } from "react"
import { ApexGanttChart, type ApexGanttHandle } from "react-apexgantt"

export default function ScheduleEditor({ initialTasks }) {
  const ganttRef = useRef<ApexGanttHandle>(null)

  const handleTaskUpdateSuccess = async (detail) => {
    // persist to your backend
    await fetch(`/api/tasks/${detail.taskId}`, {
      method: "PATCH",
      body: JSON.stringify(detail.updatedTask)
    })
  }

  return (
    <ApexGanttChart
      ref={ganttRef}
      tasks={initialTasks}
      viewMode="week"
      height="600px"
      onTaskDragged={(d) => console.log("dragged", d)}
      onTaskResized={(d) => console.log("resized", d)}
      onTaskUpdateSuccess={handleTaskUpdateSuccess}
    />
  )
}

The wrapper exposes eight callbacks (onTaskUpdate, onTaskUpdateSuccess, onTaskUpdateError, onTaskValidationError, onTaskDragged, onTaskResized, onSelectionChange, onDependencyArrowUpdate) and an imperative ref handle with update, updateTask, zoomIn, zoomOut, destroy, and getInstance. The pattern works the same with Redux Toolkit, Zustand, Jotai, or React Query.

Mapping Your API Shape with useGanttData

API responses rarely match the exact field names ApexGantt expects. The useGanttData hook converts your shape into ApexGantt's task model without hand-written transformation code:

import { useGanttData, ApexGanttChart } from "react-apexgantt"

function ProjectTimeline({ apiData }) {
  const tasks = useGanttData({
    data: apiData,
    parsing: {
      id: "task_id",
      name: "task_name",
      startTime: "start_date",
      endTime: "end_date"
    }
  })

  return <ApexGanttChart tasks={tasks} viewMode="week" />
}

TypeScript Support in React

ApexGantt ships TypeScript definitions for the React component, the task data model, configuration options, and the ref handle. No @types/ package needed.

import {
  ApexGanttChart,
  type TaskInput,
  type GanttUserOptions,
  type ViewMode,
  type ApexGanttHandle
} from "react-apexgantt"

const tasks: TaskInput[] = [
  { id: "task-1", name: "Design", startTime: "01-01-2026", endTime: "01-15-2026", progress: 0 }
]

const viewMode: ViewMode = "week"

react-apexgantt peer-depends on react >=16.8.0 and react-dom >=16.8.0, so the floor is React 16.8+ and the open range covers React 17, 18, and 19.

Commercial License Setup

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

// main.tsx or index.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { setApexGanttLicense } from "react-apexgantt"
import App from "./App"

setApexGanttLicense("your-license-key-here")

ReactDOM.createRoot(document.getElementById("root")!).render(<App />)

The community edition runs without a license key.