React ApexGantt

Installation

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

License Setup

If you have a commercial license, set it once at app initialization before rendering any charts:

import { setApexGanttLicense } from "react-apexgantt";

// call this at the top of your app
setApexGanttLicense("your-license-key-here");

Example with React app entry point:

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

// set license before rendering
setApexGanttLicense("your-license-key-here");

ReactDOM.createRoot(document.getElementById("root")!).render();

Quick Start

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

function App() {
  const tasks = [
    {
      id: "task-1",
      name: "Project Planning",
      startTime: "01-01-2024",
      endTime: "01-08-2024",
      progress: 75,
    },
    {
      id: "task-2",
      name: "Development",
      startTime: "01-09-2024",
      endTime: "01-20-2024",
      progress: 40,
      dependency: "task-1",
    },
  ];

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

API Reference

Props

Prop	Type	Description
`tasks`	`TaskInput[]`	Array of tasks to display
`options`	`GanttUserOptions`	ApexGantt configuration options
`width`	`string \| number`	Chart width
`height`	`string \| number`	Chart height
`viewMode`	`ViewMode`	View mode: ‘day’, ‘week’, ‘month’, ‘quarter’, ‘year’
`theme`	`'light' \| 'dark'`	Color theme
`className`	`string`	CSS class name
`style`	`CSSProperties`	Inline styles

Events

Event	Type	Description
`onTaskUpdate`	`(detail) => void`	Fired when a task is being updated
`onTaskUpdateSuccess`	`(detail) => void`	Fired after successful task update
`onTaskDragged`	`(detail) => void`	Fired when a task is dragged
`onTaskResized`	`(detail) => void`	Fired when a task is resized

Ref Methods

const ganttRef = useRef<ApexGanttHandle>(null);

// available methods
ganttRef.current?.update(options);
ganttRef.current?.updateTask(taskId, data);
ganttRef.current?.zoomIn();
ganttRef.current?.zoomOut();
ganttRef.current?.destroy();

Custom Hooks

useGanttData

Parse external data into ApexGantt format:

import { useGanttData } from "react-apexgantt";

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

Reset Password

React ApexGantt

Stay Updated