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} pixelsPerDay={25.7} height="500px" />
}

That's a complete, working React Gantt chart. Dependencies render as arrows between tasks. The pixelsPerDay prop takes a number; the header tier auto-picks from year down to minute as the value increases.

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. Every committed edit, however it was made, also fires onTaskUpdateSuccess with the resolved task, so that is the one to persist from.

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}
      pixelsPerDay={25.7}
      height="600px"
      onTaskDragged={(d) => console.log("dragged", d)}
      onTaskResized={(d) => console.log("resized", d)}
      onTaskUpdateSuccess={handleTaskUpdateSuccess}
    />
  )
}

The wrapper exposes a callback for every core event, 20 with apexgantt 3.20, named on plus the event: onTaskUpdate, onTaskUpdateSuccess, onTaskDragged, onTaskProgressChanged, onTaskAdded, onDependencyAdded, onHistoryChange, onSortChange and the rest. The imperative ref handle has update, updateTask, zoomIn, zoomOut, destroy, and getInstance, which returns the chart instance for the rest of the API. Only the props that changed are passed to update(). 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} pixelsPerDay={25.7} />
}

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 ApexGanttHandle
} from "react-apexgantt"

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

const pixelsPerDay: number = 25.7

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.

Licence Key Setup

Set your licence key 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 />)

ApexGantt is included in the Premium plan and above and has no free tier. Without a key it renders with a trial watermark for evaluation.