Evolution of vue-ganttastic package
npm install hy-vue-ganttA 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
``bashnpm
npm install hy-vue-gantt
$3
`typescript
// 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")
`$3
`vue
:chart-start="chartStart"
:chart-end="chartEnd"
:precision="precision"
:bar-start="barStart"
:bar-end="barEnd"
color-scheme="vue"
grid
commands
>
v-for="row in rows"
:key="row.id"
:label="row.label"
:bars="row.bars"
/>
`✨ Key Features
$3
- 📅 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
$3
- 🎨 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
$3
- 📤 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
$3
- 🖱️ 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
🔧 Advanced Examples
$3
`typescript
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
}
}
]
}
])
`$3
`vue
:milestones="milestones"
:timeaxis-events="events"
show-events-axis
>
🎯 {{ milestone.name }}
`$3
`vue
label-column-title="Project Management"
:multi-column-label="columns"
sortable
label-resizable
>
{{ value }}
`$3
`vue
export-enabled
:export-options="exportConfig"
show-importer
:importer-allowed-formats="['csv', 'jira']"
@export-success="handleExportSuccess"
@import-data="handleImportData"
>
`🎨 Theming & Customization
$3
`vue
`Available themes:
default, vue, dark, material-blue, creamy, crimson, flare, fuchsia, grove, sky, slumber$3
`typescript
const customTheme = {
primary: "#1e40af",
secondary: "#3b82f6",
text: "#1f2937",
background: "#ffffff",
hoverHighlight: "rgba(59, 130, 246, 0.1)"
}
`📱 Mobile & Touch Support
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
🔌 Event System
`vue
@click-bar="onBarClick"
@dragend-bar="onBarMoved"
@progress-change="onProgressUpdate"
@connection-complete="onConnectionCreated"
@row-drop="onRowReordered"
@sort="onDataSorted"
@label-edit="onLabelEdited"
/>
`🛠️ TypeScript Support
Full TypeScript integration with comprehensive type definitions:
`typescript
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[]
}
`🚀 Performance Features
- 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
📋 Browser Support
- Chrome: 88+
- Firefox: 85+
- Safari: 14+
- Edge: 88+
- Mobile Browsers: Full support
🔧 Development & Contributing
$3
`bash
Clone repository
git clone https://github.com/Xeyos88/HyVueGantt.git
cd HyVueGanttInstall dependencies
npm installStart development server
npm run devRun tests
npm run testBuild library
npm run build
`$3
We welcome contributions! Please:
1. Fork the repository
2. Create a feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)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:


---