- Notifications
You must be signed in to change notification settings - Fork0
React wrapper for ApexGantt library
License
NotificationsYou must be signed in to change notification settings
apexcharts/react-apexgantt
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React wrapper forApexGantt - A JavaScript library to create interactive Gantt charts.
npm install react-apexgantt apexgantt# oryarn add react-apexgantt apexganttIf 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 appsetApexGanttLicense("your-license-key-here");
Example with React app entry point:
// main.tsx or index.tsximportReactfrom"react";importReactDOMfrom"react-dom/client";import{setApexGanttLicense}from"react-apexgantt";importAppfrom"./App";// set license before renderingsetApexGanttLicense("your-license-key-here");ReactDOM.createRoot(document.getElementById("root")!).render();
importReactfrom"react";import{ApexGanttChart}from"react-apexgantt";functionApp(){consttasks=[{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<ApexGanttCharttasks={tasks}viewMode="week"height="500px"/>;}
| 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 |
| 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 |
constganttRef=useRef<ApexGanttHandle>(null);// Available methodsganttRef.current?.update(options);ganttRef.current?.updateTask(taskId,data);ganttRef.current?.zoomIn();ganttRef.current?.zoomOut();ganttRef.current?.destroy();
Parse external data into ApexGantt format:
import{useGanttData}from"react-apexgantt";consttasks=useGanttData({data:apiData,parsing:{id:"task_id",name:"task_name",startTime:"start_date",endTime:"end_date",},});
To test the examples and verify the wrapper works correctly:
# 1. Build the package firstnpm run build# 2. Setup and run test appcd test-appnpm installnpm run dev
The test app will be available athttp://localhost:5173
The test app includes:
- Basic Example: Simple Gantt with zoom controls
- Advanced Example: Data parsing, view mode switching, theme toggle
- Events Example: Interactive testing of drag, resize, and update events
About
React wrapper for ApexGantt library
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published