A powerful and flexible Gantt chart component for Vue 3 applications. This component is an evolution of the vue-ganttastic package, completely redesigned with TypeScript and enhanced features for modern web applications.
- Complete Documentation - Comprehensive guides and API reference
- Live Demo - Interactive examples and features showcase
- Getting Started - Step-by-step tutorial
# npm
npm install hy-vue-gantt
# yarn
yarn add hy-vue-gantt
# pnpm
pnpm add hy-vue-gantt// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import hyvuegantt from "hy-vue-gantt"
const app = createApp(App)
app.use(hyvuegantt)
app.mount("#app")<template>
<g-gantt-chart
:chart-start="chartStart"
:chart-end="chartEnd"
:precision="precision"
:bar-start="barStart"
:bar-end="barEnd"
color-scheme="vue"
grid
commands
>
<g-gantt-row
v-for="row in rows"
:key="row.id"
:label="row.label"
:bars="row.bars"
/>
</g-gantt-chart>
</template>
<script setup lang="ts">
import { ref } from "vue"
import type { ChartRow } from "hy-vue-gantt"
const chartStart = ref("2024-01-01")
const chartEnd = ref("2024-12-31")
const precision = ref("day")
const barStart = ref("start")
const barEnd = ref("end")
const rows = ref<ChartRow[]>([
{
id: 1,
label: "Design Phase",
bars: [
{
start: "2024-01-05",
end: "2024-01-20",
ganttBarConfig: {
id: "1",
label: "UI Design",
style: { background: "#42b883" }
}
}
]
}
])
</script>- 📅 Advanced Time Management: Multi-precision support (hours, days, weeks, months) with auto-scaling
- 🔗 Task Dependencies: Visual connections with multiple styles (straight, bezier, squared) and animations
- 📊 Progress Tracking: Interactive progress bars with drag-to-update functionality
- 🏗️ Hierarchical Structure: Nested groups with expand/collapse functionality
- 📱 Touch & Mobile: Full touch support with responsive design
- 🎨 11 Built-in Themes: From professional to dark mode
- 📋 Multi-Column Labels: Sortable columns with custom content
- 🏷️ Milestone Support: Visual milestones with constraints and tooltips
- 🎭 Custom Styling: Complete slot-based customization system
- 🌍 Internationalization: Holiday highlighting and locale support
- 📤 Export Options: PDF, PNG, SVG, Excel with customizable settings
- 📥 Import Support: CSV and Jira JSON formats
- ⏪ History Management: Built-in undo/redo functionality
- 🔄 Real-time Updates: Live data synchronization
- 🖱️ Drag & Drop: Intuitive bar and row manipulation
- ⌨️ Keyboard Navigation: Full accessibility support
- 🎯 Smart Interactions: Push-on-overlap and connection behaviors
- 🔍 Zoom Controls: Dynamic scaling with precision adjustment
const projectData = ref([
{
id: "design",
label: "Design Phase",
bars: [
{
start: "2024-01-01",
end: "2024-01-15",
ganttBarConfig: {
id: "design-1",
label: "UI Design",
connections: [
{
targetId: "dev-1",
type: "bezier",
animated: true,
relation: "FS", // Finish to Start
label: "Prerequisite",
color: "#42b883"
}
]
}
}
]
},
{
id: "development",
label: "Development Phase",
bars: [
{
start: "2024-01-16",
end: "2024-02-15",
ganttBarConfig: {
id: "dev-1",
label: "Frontend Development",
progress: 75,
progressResizable: true
}
}
]
}
])<template>
<g-gantt-chart
:milestones="milestones"
:timeaxis-events="events"
show-events-axis
>
<template #milestone="{ milestone }">
<div class="custom-milestone">🎯 {{ milestone.name }}</div>
</template>
</g-gantt-chart>
</template>
<script setup lang="ts">
const milestones = ref([
{
id: "v1-release",
date: "2024-03-15",
name: "Version 1.0 Release",
description: "Major product release",
color: "#e74c3c"
}
])
const events = ref([
{
id: "sprint-1",
label: "Sprint Planning",
startDate: "2024-01-01",
endDate: "2024-01-03",
backgroundColor: "#3498db"
}
])
</script><template>
<g-gantt-chart
label-column-title="Project Management"
:multi-column-label="columns"
sortable
label-resizable
>
<template #label-column-priority="{ value, row }">
<span :class="getPriorityClass(value)">
{{ value }}
</span>
</template>
</g-gantt-chart>
</template>
<script setup lang="ts">
const columns = ref([
{ field: "Label", sortable: true },
{ field: "StartDate", sortable: true },
{ field: "Duration", sortable: true },
{ field: "Progress", sortable: true },
{
field: "Priority",
valueGetter: (row) => row.priority || "Normal",
sortFn: (a, b) => prioritySort(a, b)
}
])
</script><template>
<g-gantt-chart
export-enabled
:export-options="exportConfig"
show-importer
:importer-allowed-formats="['csv', 'jira']"
@export-success="handleExportSuccess"
@import-data="handleImportData"
>
<template #commands="{ export: triggerExport }">
<button @click="triggerExport" class="export-btn">
📊 Export Project
</button>
</template>
</g-gantt-chart>
</template>
<script setup lang="ts">
const exportConfig = ref({
format: "pdf",
paperSize: "a4",
orientation: "landscape",
exportColumnLabel: true,
scale: 1.5
})
const handleExportSuccess = (result) => {
console.log("Export completed:", result.filename)
}
const handleImportData = (result) => {
if (result.success) {
// Update chart data with imported rows
updateChartData(result.data.rows)
}
}
</script><template>
<!-- Choose from 11 professional themes -->
<g-gantt-chart color-scheme="vue" />
<!-- Vue.js inspired -->
<g-gantt-chart color-scheme="dark" />
<!-- Dark mode -->
<g-gantt-chart color-scheme="material-blue" />
<!-- Material Design -->
</template>Available themes: default, vue, dark, material-blue, creamy, crimson, flare, fuchsia, grove, sky, slumber
const customTheme = {
primary: "#1e40af",
secondary: "#3b82f6",
text: "#1f2937",
background: "#ffffff",
hoverHighlight: "rgba(59, 130, 246, 0.1)"
}HyVue Gantt provides comprehensive mobile support:
- Touch Gestures: Drag, resize, and navigate with touch
- Responsive Layout: Adapts to different screen sizes
- Mobile Optimized: Touch-friendly controls and interactions
- Gesture Recognition: Pinch-to-zoom, swipe navigation
<template>
<g-gantt-chart
@click-bar="onBarClick"
@dragend-bar="onBarMoved"
@progress-change="onProgressUpdate"
@connection-complete="onConnectionCreated"
@row-drop="onRowReordered"
@sort="onDataSorted"
@label-edit="onLabelEdited"
/>
</template>
<script setup lang="ts">
const onBarClick = ({ bar, datetime }) => {
console.log(`Clicked ${bar.ganttBarConfig.label} at ${datetime}`)
}
const onBarMoved = ({ bar, movedBars }) => {
// Handle bar position changes
updateBackendData(bar)
}
const onProgressUpdate = ({ bar }) => {
// Sync progress changes
saveProgress(bar.ganttBarConfig.id, bar.ganttBarConfig.progress)
}
</script>Full TypeScript integration with comprehensive type definitions:
import type {
GanttBarObject,
ChartRow,
ConnectionType,
GanttMilestone,
TimeaxisEvent,
ExportOptions,
ImportResult
} from "hy-vue-gantt"
// Extend base types for your specific needs
interface ProjectTask extends GanttBarObject {
assignee: string
priority: "low" | "medium" | "high"
tags: string[]
}
interface ProjectRow extends ChartRow {
department: string
budget: number
bars: ProjectTask[]
}- Virtual Scrolling: Handles large datasets efficiently
- Smart Rendering: Only renders visible elements
- Optimized Updates: Minimal re-renders with Vue 3 reactivity
- Memory Management: Automatic cleanup and garbage collection
- Lazy Loading: Progressive data loading for better performance
- Chrome: 88+
- Firefox: 85+
- Safari: 14+
- Edge: 88+
- Mobile Browsers: Full support
# Clone repository
git clone https://github.com/Xeyos88/HyVueGantt.git
cd HyVueGantt
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm run test
# Build library
npm run buildWe welcome contributions! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See our Contributing Guide for detailed information.
This project is licensed under the MIT License - see the LICENSE file for details.
- Based on vue-ganttastic - Special thanks to the original authors
- Inspired by modern project management tools
- Built with love for the Vue.js community
If HyVue Gantt helps your project, consider supporting its development:
