Skip to main content

Zooming

Enabling default zoom settings​

To enable default zooming, set the zoom property to true.

Example:

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

   const data = getData();
</script>

<template>
   <Gantt :zoom="true" :tasks="data.tasks" />
</template>

Configuring zoom settings​

To configure zoom settings, change the required parameters of the zoom property.

Example:

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

   const dayStyle = a => {
      const day = a.getDay() == 5 || a.getDay() == 6;
      return day ? "sday" : "";
   };

   function hoursTemplate(a, b) {
      return `${format(a, "%H:%i")} - ${format(b, "%H:%i")}`;
   }
   
   const zoomConfig = {
      level: 3,
      levels: [
        {
           minCellWidth: 200,
           maxCellWidth: 400,
           scales: [{ unit: "year", step: 1, format: "%Y" }],
        },
        {
           minCellWidth: 150,
           maxCellWidth: 400,
           scales: [
              { unit: "year", step: 1, format: "%Y" },
              { unit: "quarter", step: 1, format: "%Q" },
           ],
        },
        {
           minCellWidth: 250,
           maxCellWidth: 350,
           scales: [
              { unit: "quarter", step: 1, format: "%Q" },
              { unit: "month", step: 1, format: "%F %Y" },
           ],
        },
        {
           minCellWidth: 100,
           scales: [
              { unit: "month", step: 1, format: "%F %Y" },
              { unit: "week", step: 1, format: "'week' %W" },
           ],
        },
        {
           maxCellWidth: 200,
           scales: [
              { unit: "month", step: 1, format: "%F %Y" },
              { unit: "day", step: 1, format: "%j", css: dayStyle },
           ],
        },
        {
           minCellWidth: 25,
           maxCellWidth: 100,
           scales: [
              { unit: "day", step: 1, format: "%M %j", css: dayStyle },
              { unit: "hour", step: 6, format: hoursTemplate },
           ],
        },
        {
           maxCellWidth: 120,
           scales: [
              { unit: "day", step: 1, format: "%M %j", css: dayStyle },
              { unit: "hour", step: 1, format: "%H:%i" },
           ],
        },
      ],
   };
</script>

<template>
   <Gantt 
      :tasks="data.tasks"
      :links="data.links"
      :zoom="zoomConfig" />
</template>

Handling zoom scaling​

To intercept and customize zoom behavior, you can use the zoom-scale action. For example, you can trigger zoom with a custom ratio:

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

   const data = getData();

   const api = ref();

   function zoomIn() {
      api.value.exec("zoom-scale", { dir: 1, ratio: 0.3 });
   }
</script>

<template>
   <Gantt :tasks="data.tasks" :zoom="true" ref="api" />
</template>

Related samples: