Skip to main content

Resizer

You can expand or collapse the grid and chart areas manually using the resizing handle between them.

Resizer

Setting the initial grid width​

Use the gridWidth property to set the initial width of the grid area in pixels (default: 440):

<Gantt :tasks="data.tasks" :scales="data.scales" :gridWidth="300" />

Setting the grid width programmatically​

Use the resize-grid action via api.exec() to change the grid width from code:

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

  const data = getData();

  function init(api) {
    api.exec("resize-grid", { width: 300 });
  }
</script>

<template>
  <Gantt :init="init" :tasks="data.tasks" :scales="data.scales" />
</template>

Listening to resize events​

To react when the user drags the resizer handle, listen to the resize-grid action:

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

  const data = getData();

  function init(api) {
    api.on("resize-grid", ({ width }) => {
      console.log("Grid width changed to:", width);
    });
  }
</script>

<template>
  <Gantt :init="init" :tasks="data.tasks" :scales="data.scales" />
</template>

To react to chart container size changes, listen to the resize-chart action:

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

  const data = getData();

  function init(api) {
    api.on("resize-chart", ({ width, height }) => {
      console.log("Chart resized:", width, height);
    });
  }
</script>

<template>
  <Gantt :init="init" :tasks="data.tasks" :links="data.links" :scales="data.scales" />
</template>

Related articles: