React ApexGantt

Installation

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

Demo

View Demo Project created using React-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",
  },
});