Skip to main content

autoScale

Description​

Optional. Allows the timescale to change dynamically its start/end dates

Usage​

autoScale?: boolean;

Parameters​

  • true (default) - scale can change dynamically when data is added, it may change when data is modified. Tasks can be moved out via drag and drop. The initial behaviour depends on data:
    • no initial data: start and end define the initial visible range of the timescale
    • some initial data: start and end are taken from data, but the scale cannot be smaller than the defined start and end
  • false - start and end define a fixed, unchangeable range of the scale that does not react on data changed. Tasks cannot be moved outside of this range via drag and drop

If the start or/and end are not provided, the scale defaults to a range from the current date plus one month.

Example​

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

   const data = getData();
</script>

<template>
   <Gantt
      :tasks="tasks"
      :start="new Date(2023, 2, 1)"
      :end="new Date(2024, 3, 12)"
      autoScale="true"
   />
</template>

Related articles: Configuring timescale