Reference: GGanttChart

The main component of Vue Ganttastic. Represents an entire chart and is meant to have at least one g-gantt-row child component.


chart-startstringStart date-time of the chart.
chart-endstringEnd date-time of the chart.
precisionstring?"hour"Display precision of the time-axis. Possible values: hour, day and month.
bar-startstringName of the property in bar objects that represents the start date.
bar-endstringName of the property in bar objects that represents the end date .
date-formatstring?"YYYY-MM-DD HH:mm"Datetime string format of chart-start, chart-end and the values of the bar-start, bar-end properties in bar objects. See Day.js format tokensopen in new window.
widthstring?"100%"Width of the chart (e.g. 80% or 800px)
hide-timeaxisboolean?falseToggle visibility of the time axis.
color-schemestring?"default"Color scheme (theme) of the chart. See color schemes.
gridstring?falseToggle visibility of background grid.
push-on-overlapboolean?falseSpecifies whether bars "push one another" when dragging and overlaping.
no-overlapboolean?falseIf push-on-overlap is false, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position.
row-heightnumber?40Height of each row in pixels.
highlighted-unitsnumber[]?[]The time units specified here will be visually highlighted in the chart with a mild opaque color.
fontstring"Helvetica"Font family of the chart.

Custom Events

Event nameEvent data
mousedown-bar{bar: GanttBarObject, e: MouseEvent, datetime?: string}
mouseup-bar{bar: GanttBarObject, e: MouseEvent, datetime?: string}
dblclick-bar{bar: GanttBarObject, e: MouseEvent, datetime?: string}
mouseenter-bar{bar: GanttBarObject, e: MouseEvent}
mouseleave-bar{bar: GanttBarObject, e: MouseEvent}
dragstart-bar{bar: GanttBarObject, e: MouseEvent}
drag-bar{bar: GanttBarObject, e: MouseEvent}
dragend-bar{bar: GanttBarObject, e: MouseEvent, movedBars?: Map<GanttBarObject, {oldStart: string, oldEnd: string}>}
contextmenu-bar{bar: GanttBarObject, e: MouseEvent, datetime?: string}


Slot nameSlot dataDescription
upper-timeunit{label: string, value: string}Content of an upper time-unit section in the time axis.
timeunit{label: string, value: string}Content of a time-unit section in the time axis.
bar-tooltip{bar: GanttBarObject}Slot for the tooltip which appears when hovering over a bar.

Color Schemes

  • default
  • creamy
  • crimson
  • dark
  • flare
  • fuchsia
  • grove
  • material-blue
  • sky
  • slumber
  • vue
Last Updated:
Contributors: InfectoOne