Skip to main content

displayMode

Description​

Optional. Defines which areas of the Gantt chart to display

Usage​

displayMode?: "all" | "grid" | "chart" | ("grid" | "chart" | "subGrid")[];

Parameters​

The property takes either a string or an array of panel names.

The following strings are available:

  • "all" (default) - displays both the grid and the chart areas. The Subgrid area is added if there are columns with section: "subGrid" | PRO feature
  • "grid" - displays only the grid area
  • "chart" - displays only the chart area

An array sets any combination of the panels:

["grid", "subGrid"]           // both grids, no chart
["grid", "chart"]             // the grid and the chart
["grid"]                      // only the grid
note

The "subGrid" panel is available in PRO Edition only. It is displayed only if there are columns with section: "subGrid".

Example​

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const { tasks, scales } = getData();
</script>

<template>
  <Gantt :tasks="tasks" :scales="scales" displayMode="grid" />
</template>

Related articles: