# Task Layout

## Content

In the Gantt chart, using the `TaskbarLayout` class, you can configure the task layout with link line mode, taskbar height, date-text format, and round the taskbar to whole days.

## Link Line Mode

The project displays link lines on a Gantt Chart view that highlights the task dependencies of the linked tasks. If necessary, you can customize the appearance of the link lines or hide them by setting the `linkLineMode` option value. There are three link line modes available, `noLinks`, `toTop`, and `toEnd`. The default mode is toTop.

| **Property Value** | **Output** |
| -------------- | ------ |
| ganttSheet.project.layout.linkLineMode = "noLinks"; | ![noLink_Linkmode](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/noLink_Linkmode.d746ed.png?width=400) |
| ganttSheet.project.layout.linkLineMode = "toTop"; | ![ToTop_Linkmode](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ToTop_Linkmode.a2b735.png?width=400) |
| ganttSheet.project.layout.linkLineMode = "toEnd"; | ![ToEnd_Linkmode](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ToEnd_Linkmode.914e7b.png?width=400) |

## Taskbar Height

You can set the taskbar height by using the `barHeight` option. The default value of `barHeight` is 12 pixels. The following code sample sets the taskbar height to 36.

```javascript
var barHeight = 36;
ganttSheet.project.layout.barHeight = barHeight;
```

The output below will be generated.
![TaskBarHeight](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/TaskBarHeight.9cfd4d.png?width=500)

## Taskbar Date Format

When you add the date field to the Gantt chart taskbar, the date text will be displayed. You can customize the display of date formats using the `barTextDateFormat` option. The default date format is "yyyy/mm/dd hh:mm".
The following code sample sets the date format to "yyyy/mm/dd".

```javascript
var barTextDateFormat = "yyyy/mm/dd";
ganttSheet.project.layout.barTextDateFormat = barTextDateFormat;
```

The output below will be generated.

![TaskbarDateformat](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/TaskbarDateformat.d74d9c.png?width=220)

## Round to Whole Days

The actual task duration is not always whole days. If you want to overwrite the duration values with the rounded ones, set the `roundBarsToWholeDays` option value to true. This will round the taskbars to whole days.

| **Property Value** | **Output** |
| -------------- | ------ |
| ganttSheet.project.layout.roundBarsToWholeDays = true; | ![Roundtowholedays_True](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/Roundtowholedays_True.689b16.png?width=440) |
| ganttSheet.project.layout.roundBarsToWholeDays = false; | ![Roundtowholedays_false](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/Roundtowholedays_false.2a415f.png?width=440) |