A powerful and flexible Gantt chart component library, written in native JS + Canvas, designed specifically for modern web applications, and supports TypeScript.
This current version is fully newly developed. If you just want to use Vue version, I strongly recommend that you upgrade to this version(@xpyjs/gantt-vue is for Vue3). If you are looking for the previous version, please refer to the origin-vue3 branch.
A Gantt chart is a project management tool used to display project progress, task allocation, and resource utilization. Based on a timeline, it visualizes the start time, end time, duration, and dependencies between tasks in a project through bar charts.
XGantt is a high-performance Gantt chart component library developed in native JavaScript. Built with Canvas technology, it provides smooth user experience and rich functional features.
npm install @xpyjs/gantt-core # or yarn add @xpyjs/gantt-core # or pnpm add @xpyjs/gantt-core
import { XGantt } from '@xpyjs/gantt-core';
import '@xpyjs/gantt-core/index.css';
// Prepare data
const taskData = [
{
id: 1,
name: 'Project Start',
startTime: '2024-01-01',
endTime: '2024-01-05',
progress: 100
},
{
id: 2,
name: 'Requirements Analysis',
startTime: '2024-01-06',
endTime: '2024-01-15',
progress: 80
},
{
id: 3,
name: 'System Design',
startTime: '2024-01-16',
endTime: '2024-01-30',
progress: 50
}
];
// Create Gantt chart instance
const gantt = new XGantt('#gantt-container', {
data: taskData
});
<!DOCTYPE html> <html> <head> <title>XGantt Demo</title> </head> <body> <div id="gantt-container" style="width: 100%; height: 600px;"></div> <script src="your-script.js"></script> </body> </html>
const gantt = new XGantt('#gantt-container', {
// Data configuration
data: taskData,
// Timeline configuration
unit: 'day', // 'hour' | 'day' | 'week' | 'month' | 'quarter'
// Dependency configuration
links: {
data: [], // Dependency relationship data
key: 'id', // Specify the unique identifier field for data
show: true, // Display dependency relationships
create: {
enabled: true, // Allow creating dependency relationships in the view
mode: 'hover', // Display creation points when hovering over task bars
from: true, // Allow nodes to be used as starting points for creating connections
to: true // Allow nodes to be used as endpoints for creating connections
}
},
// Log level
logLevel: 'info' // 'debug' | 'info' | 'warn' | 'error' | 'none',
// ... other configuration options
});
// Listen to task selection events
gantt.on('select', (data, checked, all) => {
console.log('Selected tasks:', data);
});
// Listen to task row click events
gantt.on('click:row', (e, data) => {
console.log('Clicked task row:', data);
});
// Listen to task bar click events
gantt.on('click:slider', (e, data) => {
console.log('Clicked task bar:', data);
});
// Listen to task move events
gantt.on('move', (data) => {
console.log('Task moved:', data);
});
new XGantt(element: string | HTMLElement, options?: IOptions)
element: Container element or selectoroptions: Configuration optionsDynamically update Gantt chart configuration options.
gantt.update({
unit: 'month',
logLevel: 'debug'
});
Force render the view.
Destroy the Gantt chart instance and clean up all resources.
jumpTo(date?: any): booleanJump to the specified date position on the timeline.
gantt.jumpTo('2024-06-01');
gantt.jumpTo(new Date()); on(event: keyof EventMap, callback: Function): void
Register event listeners.
gantt.on('select', (data, checked, all) => {
// Handle selection events
});
See complete configuration options: IOptions
The Gantt chart supports the following events:
Event Name Parameters Descriptionerror (error: ErrorType) Error handling select (data: any[], checked: boolean, all: any[]) Task selection click:row (e: MouseEvent, data: any) Row click dblclick:row (e: MouseEvent, data: any) Row double-click contextmenu:row (e: MouseEvent, data: any) Row right-click click:slider (e: MouseEvent, data: any) Task bar click dblclick:slider (e: MouseEvent, data: any) Task bar double-click contextmenu:slider (e: MouseEvent, data: any) Task bar right-click move (data: {row: any; old: any}[]) Task movement create:link (link: ILink) Dependency creation update:link (link: ILink) Dependency update select:link (add: ILink, cancel: ILink, all: ILink[]) Dependency selection
See complete event types: EventMap
XGantt also provides some practical utility functions to help developers with common operations.
import { generateId, dayjs, colorjs } from '@xpyjs/gantt-core';
// Generate unique ID
const id = generateId();
// Time handling (dayjs package, if you don't want to install it separately, you can use it through export. Some plugins are built-in, but if you need more, you still need to install them separately)
const now = dayjs();
const formatted = dayjs('2024-01-01').format('YYYY-MM-DD');
// Color handling
const color = colorjs('#ff0000');
const rgb = color.alpha(0.5).toRgb(); // Get RGB color value { r: 255, g: 0, b: 0, a: 0.5 }
XGantt can be adapted to various front-end frameworks. However, I also provide adaptation packages for Vue and React to facilitate usage within these frameworks.
@xpyjs/gantt-vue is designed specifically for Vue 3, providing better integration and user experience.
npm install @xpyjs/gantt-vue # or yarn add @xpyjs/gantt-vue # or pnpm add @xpyjs/gantt-vue
<template>
<XGanttVue :options="ganttOptions" />
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import XGanttVue from '@xpyjs/gantt-vue';
import '@xpyjs/gantt-vue/style.css';
const ganttOptions = reactive({
data: [
{
id: 1,
name: 'Project Start',
startTime: '2024-01-01',
endTime: '2024-01-05',
progress: 100
},
{
id: 2,
name: 'Requirements Analysis',
startTime: '2024-01-06',
endTime: '2024-01-15',
progress: 80
},
{
id: 3,
name: 'System Design',
startTime: '2024-01-16',
endTime: '2024-01-30',
progress: 50
}
],
unit: 'day',
table: {
columns: [
{ label: 'Task Name', field: 'name' },
{ label: 'Start Time', field: 'startTime' },
{ label: 'End Time', field: 'endTime' },
]
}
});
</script>
@xpyjs/gantt-vue has been adapted for reactivity, so directly modifying the data will trigger automatic updates to the view.
@xpyjs/gantt-react is designed specifically for React, providing better integration and user experience.
npm install @xpyjs/gantt-react # or yarn add @xpyjs/gantt-react # or pnpm add @xpyjs/gantt-react
import { useState, useCallback, useEffect } from 'react';
import { XGanttReact, useXGantt } from '@xpyjs/gantt-react';
import '@xpyjs/gantt-react/style.css';
function App() {
const { ganttRef, jumpTo } = useXGantt();
const [ganttData, setGanttData] = useState([
{
id: 1,
name: 'Project Start',
startTime: '2024-01-01',
endTime: '2024-01-05',
progress: 100
},
{
id: 2,
name: 'Requirements Analysis',
startTime: '2024-01-06',
endTime: '2024-01-15',
progress: 80
},
{
id: 3,
name: 'System Design',
startTime: '2024-01-16',
endTime: '2024-01-30',
progress: 50
}
]);
const ganttOptions: IOptions = {
data: ganttData,
table: {
columns: [
{ label: 'Task Name', field: 'name' },
{ label: 'Start Time', field: 'startTime' },
{ label: 'End Time', field: 'endTime' },
]
},
unit: 'day',
};
return (
<div className="app">
<XGanttReact ref={ganttRef} options={ganttOptions} />
</div>
);
}
export default App;
@xpyjs/gantt-react provides a hook: useXGantt, which makes it easy to use within function components.
XGantt is built on HTML5 Canvas technology and works normally as long as the browser supports the Canvas API:
Note: XGantt primarily relies on the Canvas 2D Context API and runs well in browsers that support Canvas. The above version requirements already cover the vast majority of user scenarios.
MIT License
Contributions are welcome! Please read our contribution guidelines for more information.
Made with ❤️ by the Jeremy Jone
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4