Simple And Intuitive Gantt Chart For Vue.js – vue-ganttastic


Category: Vue.js Vue.js Charts | July 1, 2021
Author:InfectoOne
Official Page:Go to website
Last Update:July 1, 2021
License:MIT

vuejs-draggable-gantt-chart

Description:

vue-ganttastic is a simple and intuitive Gantt chart for Vue.js for your web application with great features and its easy to implement in your existing or a new project.

How to use it?

Step 1: Install the component using NPM.

npm install vue-ganttastic

Step 2: Now, you will need to install the dependency moment.js, is peer-dependency and it required to install this in order to run Gantt chart correctly.

npm install moment

Step 3: Import the component GGanttChart and GGanttRow.

import {GGanttChart, GGanttRow} from 'vue-ganttastic'

Step 4: Full code example.

<template>
  ...

  <g-gantt-chart
    :chart-start="myChartStart"
    :chart-end="myChartEnd"
  >
    <g-gantt-row
      v-for="row in rows"
      :key="row.label"
      :label="row.label"
      :bars="row.bars"
      bar-start="myStart"
      bar-end="myEnd"
    />
  </g-gantt-chart>

  ...
</template>

<script>

import {GGanttChart, GGanttRow} from 'vue-ganttastic'

export default {

  ...

  components:{
    GGanttChart,
    GGanttRow
  },

  data(){
    return {
      myChartStart: "2020-03-01 00:00",
      myChartEnd: "2020-03-03 00:00",
      rows: [
        {
          label: "My row #1",
          bars: [
            {
              myStart: "2020-03-01 12:10",
              myEnd: "2020-03-01 16:35"
            }
          ]
        },
        {
          label: "My row #2",
          bars: [
            {
              myStart: "2020-03-02 01:00",
              myEnd: "2020-03-02 12:00"
            },
            {
              myStart: "2020-03-02 13:00",
              myEnd: "2020-03-02 22:00"
            }
          ]
        }
      ]
    }
  }

  ...

}
</script>