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.
# 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>
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
}
}
]
}
]) Milestones & Project Tracking
<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> Multi-Column Layout & Sorting
<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> Import/Export Integration
<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> 🎨 Theming & Customization
<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)"
} 📱 Mobile & Touch Support
HyVue Gantt provides comprehensive mobile support:
<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[]
}
# 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
We welcome contributions! Please:
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')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.
If HyVue Gantt helps your project, consider supporting its development:
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
