Gantt-Chart
A high-performance Gantt chart component supporting Tree Data, Auto-scheduling, Virtual scrolling and Resource conflict detection.
TIP
YH-UI GanttChart is designed for complex project management scenarios, supporting virtual scrolling for tens of thousands of tasks, dynamic tree display, auto-scheduling based on dependencies, and milestone visualization.
Basic Usage
The Gantt chart component aims to provide an intuitive timeline view of task progress and dependency relationships.
Interaction, Search & Zoom
Built-in integrated toolbar supports keyword search, stepless zooming (slider adjustment), and one-click view mode switching. With draggable enabled, users can adjust task time and progress via drag-and-drop.
Milestone
When a task's start and end dates are the same, the component automatically renders it as a diamond-shaped symbol, which is a Milestone.
Auto Recognition
You only need to set startDate and endDate to the same value (e.g., midnight of the same day), and the component will internally convert it to milestone style.
Tree Structure & Rollup
Supports task hierarchy nesting. The parent task's time range is automatically rolled up from its children. Additionally, Tree Lines are automatically rendered in the table to facilitate observation of complex relationships.
Summary Bar Style
Summary tasks are displayed with a special "Summary Bar" on the timeline, featuring downward vertical marks (ears) at both ends, conforming to industrial Gantt chart visual standards.
Auto-scheduling
Modifying a predecessor task will cause successor tasks to automatically shift accordingly.
Large Data Virtual Scrolling
Supports rendering massive amounts of data without performance lag.
Resource Conflict Detection
Intelligently identifies and highlights resource allocation conflicts.
Advanced Usage
Custom Task Rendering
The task-content slot allows full customization of the task block content, adding icons, progress percentages, etc.
Custom Table Cells
The table-cell slot provides custom rendering for each cell in the sidebar table, enabling status tags, avatars, and other complex displays.
Event Handling
Listen to various interaction events to implement custom logic. Supports click, double-click, drag, etc.
Best Practices
Performance Optimization
- Use Virtual Scrolling for Large Data: When the number of tasks exceeds 100, it is recommended to enable the
virtualproperty. - Set Appropriate View Mode: For long-duration projects, use
weekormonthviews. - On-demand Loading: For deep tree structures, consider lazy loading child nodes.
<yh-gantt-chart v-model:data="tasks" :columns="columns" virtual view-mode="week" :row-height="40" />Data Structure Recommendations
// ✅ Recommended: Use ISO 8601 date format
const task = {
id: 'task-1',
name: 'Dev Task',
startDate: '2024-03-01',
endDate: '2024-03-15',
progress: 60
}
// ✅ Recommended: Explicit dependency relationships
const tasks = [
{ id: 't1', name: 'Req Analysis', startDate: '2024-03-01', endDate: '2024-03-05' },
{
id: 't2',
name: 'Design',
startDate: '2024-03-06',
endDate: '2024-03-10',
dependencies: ['t1']
},
{ id: 't3', name: 'Dev', startDate: '2024-03-11', endDate: '2024-03-20', dependencies: ['t2'] }
]Resource Management
Allocate resources rationally to avoid conflicts:
const tasks = [
{
id: 'task-1',
name: 'Frontend Dev',
startDate: '2024-03-01',
endDate: '2024-03-10',
assignees: ['developer-1', 'developer-2']
},
{
id: 'task-2',
name: 'Backend Dev',
startDate: '2024-03-01',
endDate: '2024-03-10',
assignees: ['developer-3'] // Avoid resource conflict with task-1
}
]FAQ
How to export Gantt chart as an image?
You can use the html2canvas library:
import html2canvas from 'html2canvas'
const exportGanttChart = async () => {
const ganttElement = document.querySelector('.yh-gantt-chart')
if (ganttElement) {
const canvas = await html2canvas(ganttElement)
const link = document.createElement('a')
link.download = 'gantt-chart.png'
link.href = canvas.toDataURL()
link.click()
}
}How to implement batch operations on tasks?
// Batch update task status
const updateTasksStatus = (taskIds: string[], status: string) => {
tasks.value = tasks.value.map((task) => {
if (taskIds.includes(task.id)) {
return { ...task, status }
}
return task
})
}
// Batch delete tasks
const deleteTasks = (taskIds: string[]) => {
tasks.value = tasks.value.filter((task) => !taskIds.includes(task.id))
}How to customize timeline scale?
Adjust the timeline display via view-mode and zoom:
<yh-gantt-chart v-model:data="tasks" v-model:view-mode="viewMode" :columns="columns" />
<!-- Toolbar will automatically show view switcher buttons -->How to handle cross-timezone tasks?
Uniformly use UTC time or explicitly specify the timezone:
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
dayjs.extend(utc)
dayjs.extend(timezone)
const task = {
id: 'task-1',
name: 'Global Meeting',
startDate: dayjs.tz('2024-03-01 09:00', 'America/New_York').toISOString(),
endDate: dayjs.tz('2024-03-01 10:00', 'America/New_York').toISOString()
}Use in Nuxt
YhGanttChart can be used directly in Nuxt 3/4 projects. After registering YH-UI, the component supports SSR for the static structure, and interactive behaviors continue to work normally after hydration.
SSR Compatibility Notes:
- ✅ First Screen Rendering: The initial structure, task list, and timeline scales support SSR, improving SEO and speed.
- ✅ State Sync: Supports two-way binding for
v-model:dataandv-model:view-mode, ensuring perfect hydration. - ✅ Auto-import: All components and types are directly usable after enabling YH-UI in Nuxt config.
- ⚠️ Browser APIs: Dragging interaction and scroll monitoring only work in the client environment; environment isolation is already handled.
Production Choice
For large projects with thousands of tasks, it is recommended to enable the virtual attribute in Nuxt to obtain ultimate scrolling performance.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| data | Task data, supports tree structure | GanttTask[] | [] |
| columns | Left table column definitions | GanttColumn[] | [{ prop: 'name', label: 'Task Name', width: 200 }] |
| view-mode | View mode, controls timeline granularity | 'day' | 'week' | 'month' | 'year' | 'day' |
| start-date | Forced Gantt chart start date | Date | string | Auto-calculated |
| end-date | Forced Gantt chart end date | Date | string | Auto-calculated |
| draggable | Whether to allow task timing dragging | boolean | false |
| progress-draggable | Whether to allow progress dragging | boolean | false |
| auto-schedule | Whether to enable auto-scheduling | boolean | true |
| virtual | Enable virtual scrolling | boolean | false |
| show-resource-load | Show resource load detection | boolean | true |
| show-dependencies | Show task dependency lines | boolean | true |
| row-height | Row height (px) | number | 40 |
| header-height | Header height (px) | number | 60 |
| bordered | Whether to show borders | boolean | true |
| loading | Whether to show loading status | boolean | false |
| teleported | Whether internal tooltips are teleported to body | boolean | true |
| theme-overrides | Theme variable overrides | ComponentThemeVars | undefined |
Events
| Name | Description | Parameters |
|---|---|---|
| update:data | Triggered when task data is updated | (data: GanttTask[]) |
| update:view-mode | Triggered when view mode changes | (mode: GanttViewMode) |
| task-click | Triggered when a task block is clicked | (task: GanttTask, event: MouseEvent) |
| task-dblclick | Triggered when a task block is double-clicked | (task: GanttTask, event: MouseEvent) |
| task-drag-end | Triggered when task dragging ends | (task: GanttTask) |
| progress-drag-end | Triggered when progress dragging ends | (task: GanttTask) |
| dependency-click | Triggered when a dependency line is clicked | (from: GanttTask, to: GanttTask, event: MouseEvent) |
Slots
| Name | Description | Parameters |
|---|---|---|
| task-content | Custom content inside task block | { task: GanttTask } |
| table-cell | Custom sidebar table cell | { row: GanttTask, column: GanttColumn, index: number } |
| tooltip | Custom hover tooltip content | { task: GanttTask } |
Expose
This component does not expose public instance methods or properties.
GanttTask Type
| Name | Description | Type | Required |
|---|---|---|---|
| id | Unique ID | string | number | Yes |
| name | Task name | string | Yes |
| startDate | Start date | string | number | Date | Yes |
| endDate | End date | string | number | Date | Yes |
| progress | Progress (0-100) | number | No |
| dependencies | List of dependent task IDs | (string | number)[] | No |
| children | List of child tasks | GanttTask[] | No |
| assignees | List of resource IDs | string[] | No |
| status | Preset status token | 'success' | 'warning' | 'danger' | 'info' | 'default' | No |
| color | Custom background color | string | No |
| textColor | Custom text color | string | No |
| parentId | Parent task ID | string | number | No |
| expanded | Expanded state | boolean | No |
GanttColumn Type
| Name | Description | Type | Default |
|---|---|---|---|
| prop | Field name | string | Required |
| label | Column header | string | Required |
| width | Column width | string | number | auto |
| align | Alignment | 'left' | 'center' | 'right' | 'left' |
Theme Variables
| Name | Description | Default |
|---|---|---|
--yh-gantt-border-color | Border color | var(--yh-border-color-light) |
--yh-gantt-bg-color | Background color | var(--yh-bg-color) |
--yh-gantt-header-bg-color | Header background color | var(--yh-fill-color-light) |
--yh-gantt-task-color | Task block primary color | var(--yh-color-primary) |
--yh-gantt-line-color | Grid line color | var(--yh-border-color-lighter) |
Type Exports
| Name | Description |
|---|---|
YhGanttChartProps | Component props type |
YhGanttChartEmits | Component emits type |
YhGanttTask | Task data type |
YhGanttColumn | Column config type |
YhGanttChartSlots | Component slots type |
YhGanttChartInstance | Component instance type |