zunnzunn / vue-ganttastic

Simple, interactive and highly customizable Gantt chart component for Vue 3
https://zunnzunn.github.io/vue-ganttastic/
565 stars 141 forks source link

Example not working #122

Closed johnfercher closed 1 month ago

johnfercher commented 1 month ago

I had to add ganttBarConfig but even with that the gantt don´t load correctly.

<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 "@infectoone/vue-ganttastic";

export default {
  components: {GGanttRow, GGanttChart},
  data() {
    return {
      myChartStart: "2020-02-29 00:00",
      myChartEnd: "2020-03-05 00:00",
      rows: [
        {
          label: "My row #1",
          bars: [
            {
              ganttBarConfig: 1,
              myStart: "2020-03-01 12:10",
              myEnd: "2020-03-01 16:35"
            }
          ]
        },
        {
          label: "My row #2",
          bars: [
            {
              ganttBarConfig: 3,
              myStart: "2020-03-02 01:00",
              myEnd: "2020-03-02 12:00"
            },
            {
              ganttBarConfig: 4,
              myStart: "2020-03-02 13:00",
              myEnd: "2020-03-02 22:00"
            }
          ]
        }
      ]
    }
  }
}
</script>

Screenshot from 2024-08-07 00-09-10

zunnzunn commented 1 month ago

You did not specify the bar-start="myStart"andbar-end="myEnd" props in the g-gantt-chartcomponent. Also, ganttBarConfig is not supposed to be a number, but an object containing configuration properties for your bar (e.g. the label of the bar, the CSS styling etc.). Please refer to the common use cases in the docs.