@mogura/moguchart-vue

@mogura/moguchart-vue

The official Vue 3 wrapper component for Moguchart (@mogura/moguchart-core).

Easily integrate a high-performance, responsive Gantt chart Web Component into your Vue 3 applications with full TypeScript support, reactive props, template refs, and Vue custom event bindings.

日本語版ドキュメントはこちら (Japanese documentation)

Features

• ⚡ Full Vue 3 Integration: Works seamlessly with Vue 3 Composition API (<script setup>) and Options API.
• 🔒 Type-Safe: Full TypeScript definitions for props, emits, and instance methods.
• 🔄 Reactive Sync: Props (rows, option, theme, etc.) are automatically synced to the underlying Web Component.
• 🎯 Vue Event Bindings: Standard Vue event listening (@task-update="onUpdate", @task-click="onClick", etc.).
• 🛠️ Imperative Methods: Access Web Component methods (exportImage, exportExcel, use, zoomTo, resetScroll, etc.) via template refs.
• 🔌 Plugin Support: Integrates smoothly with @mogura/moguchart-plugin-export (PNG/PDF) and @mogura/moguchart-plugin-excel (Excel).
• 📈 Baseline & Delay Tracking: Compare planned schedules (task.baseline) against actual timelines with automatic delay highlighting and variance tooltips.
• 📋 Multi-Column Data Grid & Inline Editing: WBS data table (option.grid) with column resizing and inline cell editing (@cell-edit, @column-resize).

Installation

# npm
npm install @mogura/moguchart-vue @mogura/moguchart-core vue

# pnpm
pnpm add @mogura/moguchart-vue @mogura/moguchart-core vue

# yarn
yarn add @mogura/moguchart-vue @mogura/moguchart-core vue

Quick Start

Basic Usage with <script setup>

<script setup lang="ts">
import { ref } from 'vue'
import {
  GanttChart,
  type GanttRow,
  type GanttChartOption,
  type TaskUpdateEventDetail,
  type TaskClickEventDetail,
} from '@mogura/moguchart-vue'

const rows = ref<GanttRow[]>([
  {
    id: 'row-1',
    name: 'Planning Phase',
    tasks: [
      {
        id: 'task-1',
        name: 'Requirement Definition',
        start: new Date('2026-04-01'),
        end: new Date('2026-04-10'),
        progress: 100,
      },
      {
        id: 'task-2',
        name: 'Architecture Design',
        start: new Date('2026-04-11'),
        end: new Date('2026-04-20'),
        progress: 40,
      },
    ],
  },
])

const option: GanttChartOption = {
  calendar: {
    start: new Date('2026-04-01'),
    end: new Date('2026-04-30'),
    pxPerDay: 40,
  },
}

const handleTaskUpdate = (detail: TaskUpdateEventDetail) => {
  console.log('Task updated:', detail)
}

const handleTaskClick = (detail: TaskClickEventDetail) => {
  console.log('Task clicked:', detail.task)
}
</script>

<template>
  <div style="width: 100%; height: 500px;">
    <GanttChart
      :rows="rows"
      :option="option"
      theme="light"
      @task-update="handleTaskUpdate"
      @task-click="handleTaskClick"
      style="width: 100%; height: 100%;"
    />
  </div>
</template>

Global Registration (Vue Plugin)

You can also register GanttChart globally in your Vue app:

import { createApp } from 'vue'
import App from './App.vue'
import MoguchartVue from '@mogura/moguchart-vue'

const app = createApp(App)
app.use(MoguchartVue)
app.mount('#app')

Then use <GanttChart /> directly in any template without importing it.

Main Props

Imperative Operations via Template Ref (Undo, Redo, Zoom, etc.)

Access the GanttChartInstance via Template Ref (ref="chartRef") to call imperative methods such as undo/redo, zoom, collapsing, and exports:

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart, type GanttChartInstance } from '@mogura/moguchart-vue'

const chartRef = ref<GanttChartInstance | null>(null)

const handleUndo = async () => {
  if (chartRef.value?.canUndo) {
    await chartRef.value.undo()
  }
}

const handleRedo = async () => {
  if (chartRef.value?.canRedo) {
    await chartRef.value.redo()
  }
}

const handleZoomIn = () => chartRef.value?.zoomIn()
const handleZoomOut = () => chartRef.value?.zoomOut()
const handleResetZoom = () => chartRef.value?.resetZoom()
</script>

<template>
  <div>
    <div class="toolbar">
      <button :disabled="!chartRef?.canUndo" @click="handleUndo">Undo</button>
      <button :disabled="!chartRef?.canRedo" @click="handleRedo">Redo</button>
      <button @click="handleZoomIn">Zoom In</button>
      <button @click="handleZoomOut">Zoom Out</button>
      <button @click="handleResetZoom">Reset Zoom</button>
    </div>

    <GanttChart ref="chartRef" :rows="[]" :option="{}" />
  </div>
</template>

Available Public Methods & Getters

• Operation History (Undo / Redo): undo(), redo(), clearHistory(), recordCommand(cmd), canUndo, canRedo
• Zoom Operations: zoomIn(), zoomOut(), zoomToPercent(percent), zoomToScale(scale), resetZoom(), zoomToFit(), getZoomPercent(), getZoomScale()
• Dependency Operations: triggerDependencyDelete(sourceTaskId, targetTaskId)
• WBS & Collapse: toggleRowCollapse(rowId, collapsed?), collapseAll(), expandAll(), getRowPositions()
• Grid & Inline Cell Editing: startCellEdit(rowId, columnId), commitCellEdit(overrideValue?), cancelCellEdit()
• Scroll & Selection: scrollToTask(taskId), scrollToPosition(pos), resetScroll(), selectTask(taskId, multi?)
• Image & PDF Export: exportImage(format, options) (when @mogura/moguchart-plugin-export is registered)
• Excel Export: exportExcel(options) (when @mogura/moguchart-plugin-excel is registered)

Baseline & Schedule Variance Tracking (Plan vs. Actual)

Provide a baseline schedule on tasks (task.baseline) and configure option.baseline to visually compare planned timelines against current actual progress. Delayed tasks (task.end > baseline.end) are automatically highlighted with accent indicator lines and detailed variance tooltips.

<script setup lang="ts">
import { ref } from 'vue'
import {
  GanttChart,
  type GanttRow,
  type GanttChartOption,
} from '@mogura/moguchart-vue'

const rows = ref<GanttRow[]>([
  {
    id: 'row-1',
    name: 'Development Phase',
    tasks: [
      {
        id: 'task-1',
        name: 'UI Components',
        start: new Date('2026-04-05'),
        end: new Date('2026-04-18'), // Delayed beyond original plan
        progress: 60,
        baseline: {
          start: new Date('2026-04-01'),
          end: new Date('2026-04-12'),
          progress: 100,
        },
      },
    ],
  },
])

const option: GanttChartOption = {
  calendar: {
    start: new Date('2026-04-01'),
    end: new Date('2026-04-30'),
    pxPerDay: 40,
  },
  baseline: {
    enabled: true,          // Enable baseline rendering
    position: 'bottom',     // 'bottom' | 'top' | 'overlay'
    highlightDelay: true,   // Visually highlight delayed tasks
    delayColor: '#EF4444',  // Custom accent color for delay indicators
  },
}
</script>

<template>
  <GanttChart :rows="rows" :option="option" style="width: 100%; height: 500px;" />
</template>

Using Plugins (Export, Excel, etc.)

You can register plugins declaratively via option.plugins or imperatively using ref:

PNG / PDF Export (@mogura/moguchart-plugin-export)

<script setup lang="ts">
import { ref } from 'vue'
import {
  GanttChart,
  type GanttChartInstance,
  type GanttChartOption,
} from '@mogura/moguchart-vue'
import { exportPlugin } from '@mogura/moguchart-plugin-export'

const chartRef = ref<GanttChartInstance | null>(null)

const option: GanttChartOption = {
  calendar: {
    start: new Date('2026-04-01'),
    end: new Date('2026-04-30'),
    pxPerDay: 40,
  },
  plugins: [exportPlugin()],
}

const handleExportPng = async () => {
  await chartRef.value?.exportImage('png', {
    filename: 'gantt-export',
    download: true,
    scale: 2,
    normalizeZoom: true, // Export at baseline 100% scale regardless of current zoom
  })
}

const handleExportPdf = async () => {
  await chartRef.value?.exportImage('pdf', {
    filename: 'gantt-export',
    download: true,
  })
}
</script>

<template>
  <div>
    <button @click="handleExportPng">Export PNG</button>
    <button @click="handleExportPdf">Export PDF</button>

    <GanttChart
      ref="chartRef"
      :rows="[]"
      :option="option"
      style="width: 100%; height: 600px;"
    />
  </div>
</template>

Excel (.xlsx) Timeline Spreadsheet Export (@mogura/moguchart-plugin-excel)

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart, type GanttChartInstance, type GanttChartOption } from '@mogura/moguchart-vue'
import { excelPlugin } from '@mogura/moguchart-plugin-excel'

const chartRef = ref<GanttChartInstance | null>(null)

const option: GanttChartOption = {
  calendar: {
    start: new Date('2026-04-01'),
    end: new Date('2026-04-30'),
    pxPerDay: 40,
  },
  plugins: [excelPlugin({
    defaultFilename: 'project-schedule.xlsx',
    defaultSheetName: 'Schedule',
    themeColor: '#3B82F6',
  })],
}

const handleExportExcel = async () => {
  await chartRef.value?.exportExcel({
    filename: 'schedule-latest.xlsx',
    locale: 'en', // 'en' | 'ja' | 'zh'
    download: true,
  })
}
</script>

<template>
  <div>
    <button @click="handleExportExcel">Export Excel Timeline</button>
    <GanttChart ref="chartRef" :rows="[]" :option="option" style="width: 100%; height: 600px;" />
  </div>
</template>

Supported Events

All events dispatched by @mogura/moguchart-core are forwarded as Vue events:

License

MIT © Murakami Hiroyuki