Skip to main content

Tasks on scale

Setting the task length unit​

You can use the lengthUnit property to set the minimal unit of task length displayed in a chart, which is day by default. The lengthUnit should be equal to or smaller than the scales unit. Possible lengthUnit values: hour, day, week, month, quarter.

Example:

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

<template>
  <Gantt
     :tasks="data.tasks"
     :lengthUnit="lengthUnit" />
</template>

Setting the duration unit​

Use the durationUnit property to define the unit in which task duration is measured:

  • day (default) — task duration is measured in days
  • hour — task duration is measured in hours, which allows users to select date and time
<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  
  const data = getData();
</script>

<template>
  <Gantt :tasks="data.tasks" durationUnit="hour" />
</template>
info

durationUnit change requires data reload. When dynamically changing the durationUnit (e.g., from "hour" to "day"), users must also recalculate and reload task data (start, end, and duration) to ensure correct rendering.

Related samples: