Skip to main content

Configuring chart sizes

How to configure scales, see Configuring scales

Setting the cell width and height​

To set the cell width, use the cellWidth property. The default value is 100.

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

    const cellWidth = 150;
</script>    

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

To set the cell height, use the cellHeight property. The default value is 38.

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

    const cellHeight = 38;
</script>    

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

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>

Related sample: Chart sizes