Vue Ganttastic

Vue Ganttastic is a simple, interactive and highly customizable Gantt chart component for Vue 3.

Features

• Vue 3 support
• TypeScript support (ships with out of the box type declarations)
• Interactivity (dynamic, movable and pushable bars)
• Reactivity / Responsiveness (when changes occur, bars are repositioned accordingly)
• Customization options (chart/bar styling, slots, event handlers etc.)
• 🆕 Zoom & Pan (mouse wheel to zoom in/out, Ctrl+wheel to pan, drag to navigate)
• 🆕 Automatic Precision (time axis automatically adjusts detail level based on zoom)
• 🆕 Date Object Support (accepts both Date objects and formatted strings)

Using Vue 2? Check out Vue-Ganttastic v1.

Guide and Docs

For further guides and references, check out the official docs.

Quickstart

Install using

npm install @adesin-fr/vue-ganttastic

Then, initalize the plugin in the starting point of your app (most likely src/main.js):

import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@adesin-fr/vue-ganttastic'
...
createApp(App)
  .use(ganttastic)
  .mount('#app')

This will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.

<template>
  <g-gantt-chart
    chart-start="2021-07-12 12:00"
    chart-end="2021-07-14 12:00"
    precision="hour"
    bar-start="myBeginDate"
    bar-end="myEndDate"
  >
    <g-gantt-row label="My row 1" :bars="row1BarList" />
    <g-gantt-row label="My row 2" :bars="row2BarList" />

    <!-- Alternatively, you can use g-gantt-bar components directly inside g-gantt-row -->
    <g-gantt-row label="My row 3">
      <g-gantt-bar :bar="singleBar" />
    </g-gantt-row>
  </g-gantt-chart>
</template>

<script setup>
  import { ref } from "vue"

  const row1BarList = ref([
    {
      myBeginDate: "2021-07-13 13:00",
      myEndDate: "2021-07-13 19:00",
      id: "unique-id-1", // each bar must have a unique "id" property
      label: "Lorem ipsum dolor"
    }
  ])
  const row2BarList = ref([
    {
      myBeginDate: "2021-07-13 00:00",
      myEndDate: "2021-07-14 02:00",
      // ganttBarConfig object is not needed anymore : id and label are now picked directly on objects...
      id: "another-unique-id-2",
      hasHandles: true,
      label: "Hey, look at me",
      style: {
        // arbitrary CSS styling for your bar
        background: "#e09b69",
        borderRadius: "20px",
        color: "black"
      },
      class: "foo" // you can also add CSS classes to your bars!
    }
  ])

  const singleBar = ref({
    myBeginDate: "2021-07-13 10:00",
    myEndDate: "2021-07-13 15:00",
    id: "unique-id-3",
    label: "Direct bar usage"
  })
</script>

New Features

✨ Simplified Bar Configuration

Important: The ganttBarConfig object is no longer needed! You can now define bar properties directly on the bar object:

// ✅ New simplified format (recommended)
const bars = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    id: "unique-id-1",
    label: "My task",
    hasHandles: true,
    style: { background: "#e09b69" },
    class: "my-custom-class"
  }
])

// ❌ Old format (deprecated, but still supported)
const bars = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    ganttBarConfig: {
      id: "unique-id-1",
      label: "My task",
      // ...
    }
  }
])

Properties like id, label, hasHandles, style, class, html, bundle, and immobile can all be set directly on the bar object.

🎯 Zoom & Pan

Navigate through your Gantt chart intuitively with both mouse and touch controls:

Desktop (Mouse & Trackpad)

• Zoom In/Out: Use the mouse wheel to zoom in (show less time) or zoom out (show more time)

  • Zooming is centered on your mouse cursor position
  • Supports 20x zoom out (0.05x) to 10x zoom in

• Pan with Ctrl+Wheel: Hold Ctrl (or Cmd on Mac) and scroll to move through time horizontally

• Drag to Pan: Click and drag on empty areas of the chart (timeaxis, background) to pan

  • The cursor changes to a grab hand when you can drag
  • Bar dragging remains fully functional - drag functionality is context-aware

Mobile & Touch Devices

• Pinch to Zoom: Use two fingers to pinch in (zoom out) or pinch out (zoom in)

  • Works just like zooming on maps
  • Simultaneous panning while pinching is supported

• Two-Finger Pan: Drag with two fingers to pan horizontally through the timeline

• Single-Finger Pan: Drag with one finger on empty areas to pan through time

  • Bar dragging on touch devices remains fully functional

🔄 Automatic Precision Switching

The time axis automatically adjusts its granularity based on the visible time range:

• < 1 day visible: Shows hourly precision
• 1-60 days visible: Shows daily precision
• 60-365 days visible: Shows weekly precision
• > 365 days visible: Shows monthly precision

This provides the optimal level of detail at any zoom level, similar to how maps adjust labels when zooming.

📅 Date Object Support

The chartStart and chartEnd props now accept both Date objects and formatted strings:

// Using Date objects (recommended for dynamic dates)
const chartStart = new Date('2024-01-01')
const chartEnd = new Date('2024-12-31')

// Or using formatted strings (as before)
const chartStart = '01.01.2024 00:00'
const chartEnd = '31.12.2024 23:59'

The component automatically detects the type and handles conversions internally. All zoom, pan, and date range calculations work seamlessly with both formats.

📊 Flexible Bar Usage

You can now use bars in two ways:

1. Via :bars prop (original method):

<g-gantt-row label="My row" :bars="barList" />

2. Directly as child components (new method):

<g-gantt-row label="My row">
  <g-gantt-bar :bar="bar1" />
  <g-gantt-bar :bar="bar2" />
</g-gantt-row>

Both methods work identically and can even be mixed within the same chart.

🖱️ Click and Double-Click Events

The Gantt chart now supports both single-click and double-click events on bars and the chart background, with intelligent event handling to prevent conflicts:

Chart Events

<g-gantt-chart
  @click-chart="onChartClick"
  @dblclick-chart="onChartDblClick"
>
  <!-- ... -->
</g-gantt-chart>

const onChartClick = ({ e, datetime }) => {
  console.log('Clicked at:', datetime)
  // datetime is the date/time at the click position
}

const onChartDblClick = ({ e, datetime }) => {
  console.log('Double-clicked at:', datetime)
}

Bar Events

<g-gantt-chart
  @click-bar="onBarClick"
  @dblclick-bar="onBarDblClick"
>
  <!-- ... -->
</g-gantt-chart>

const onBarClick = ({ bar, e, datetime }) => {
  console.log('Clicked bar:', bar.id)
}

const onBarDblClick = ({ bar, e, datetime }) => {
  console.log('Double-clicked bar:', bar.id)
}

Smart Event Handling:

• Single-click events are delayed by 250ms to wait for a potential double-click
• If a double-click occurs, only the double-click event fires (single-click is cancelled)
• This prevents both events from firing on a double-click action
• The datetime parameter provides the exact date/time at the click position

Contributing

Clone the project, make some changes, test your changes out, create a pull request with a short summary of what changes you made. Contributing is warmly welcomed!

To test your changes out before creating a pull request, create a build:

npm run build

To test out the build, you should create a tarball using:

npm pack

Then, place the tarball in some other test project and install the package from the tarball by using:

npm install <name_of_the_package>.tgz

About

License MIT
Author: Marko Žunić, BSc
GitHub Repository

Support the project!

In case you found the library useful, a little tip would be much appreciated!

BTC address:

Screenshots