BECUZELUVE/vue-gantt

Gantt diagram on vuejs

vue-gantt

Vue component for display Gantt Diagramm

Build Setup

npm install vue-gantt

Live demo

Usage:

import Gantt from 'vue-gantt';

const vm = new Vue({
  ...
  tepmplate: '<gantt :data="data"></gantt>',
  components: { 'gantt': Gantt },
  ...
 });

Props structure:

{
  "rows": [],
  "legendHelp": 'Help'
}

Rows is a array of objects:

{
  "name": "task Name",
  "link": "#0",
  "values": []
}

Values is a array of objects:

{
  "desc": "Description",
  "from": start date in ms,
  "to": end date in ms,
  "color": "hex value"
}

Example:

{
  "rows": [
    {
      "name": "Step 1",
      "link": "#0",
      "values": [
        {
          "desc": "Step 1",
          "from": 1334837045000,
          "to": 1334837183000,
          "color": "#D0E4FD"
        }
      ]
    },
    {
      "name": "Step 2",
      "link": "#0",
      "values": [
        {
          "desc": "Step 2 is overdue",
          "from": 1334923578000,
          "to": 1334929209000,
          "color": "#F9C4E1"
        },
        {
          "desc": "Step 2",
          "from": 1334837183000,
          "to": 1334923578000,
          "color": "#D0E4FD"
        }
      ]
    }
  ],
  "legendHelp": "Help"
}