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>
    import { getData } from "./data";
    import { Gantt } from "@wx/svelte-gantt";
    
    const data = getData();

    let cellWidth = 150;

  </script> 

  <Gantt tasks={data.tasks} scales={data.scales} {cellWidth}/>

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

<script>
    import { getData } from "./data";
    import { Gantt } from "@wx/svelte-gantt";
    
    const data = getData();

    let scaleHeight = 38;

  </script> 

  <Gantt tasks={data.tasks} scales={data.scales} {cellHeight}/>

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>
   import { getData } from "./data";
   import { Gantt } from "@wx/svelte-gantt";
   
   const data = getData();
   
   let lengthUnit = "hour";
    
</script>

<Gantt
   tasks={data.tasks}
   {lengthUnit} />