Hyper Vue Gantt

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.


📚 Documentation & Demo

- Complete Documentation - Comprehensive guides and API reference
- Live Demo - Interactive examples and features showcase
- Getting Started - Step-by-step tutorial

🚀 Quick Start

$3

``bash


npm

npm install hy-vue-gantt

yarn

yarn add hy-vue-gantt

pnpm

pnpm add 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



`

✨ 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



`

$3

`vue



`

$3

`vue



`

🎨 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



`

🛠️ 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 HyVueGantt

Install dependencies

npm install

Start development server

npm run dev

Run tests

npm run test

Build 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`)
5. Open a Pull Request

See our Contributing Guide for detailed information.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

- Based on vue-ganttastic - Special thanks to the original authors
- Inspired by modern project management tools
- Built with love for the Vue.js community

☕ Support the Project

If HyVue Gantt helps your project, consider supporting its development:


📸 Screenshots

$3

$3

$3

$3

---