# Gantt Chart Format Tab

A list of the options available in the GANTT CHART FORMAT tab in the SpreadJS Designer for customizing taskbar appearances, gridlines, and text

## Content

The **GANTT CHART FORMAT** tab provides you various options to customize taskbars' appearance, gridlines, and text within the GanttSheet. When you insert a GanttSheet to SpreadJS, the **GANTT CHART FORMAT** tab will appear by default.

![1.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/1.dac41f.png?width=800&verticalAlign=middle)

The following table lists the sections available in this tab along with their descriptions:

| **Section** | **Description** |
| ------- | ----------- |
| **Format** | Provide options to modify grid line information on all taskbars and to change taskbar dependency link styles. |
| **Bar Styles** | Provide options to modify the style of specific taskbars using preset style rules. |

### Gridlines

The **Gridlines** button is available in the **Format** group, and it allows you to adjust gridline settings for enhanced visualization.

![2.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.3f5e9c.png?width=400&verticalAlign=middle)

SpreadJS Gantt chart has the following types of gridlines:

| **Gridline** | **Example** |
| -------- | ------- |
| Gantt Rows | ![GS-Gantt Rows](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Gantt%20Rows.eda454.png?width=400) |
| Top Tier Column | ![GS-Top Tier Column](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Top%20Tier%20Column.0bb256.png?width=400) |
| Middle Tier Column | ![GS-Middle Tier Column](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Middle%20Tier%20Column.e67500.png?width=400) |
| Bottom Tier Column | ![GS-Bottom Tier Column](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Bottom%20Tier%20Column.2f4f02.png?width=400) |
| CurrentDate | ![GS-CurrentDate](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-CurrentDate.5e832e.png?width=400) |
| Project Start | @rows=2:![GS-Project StartandFinish](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Project%20StartandFinish.46b26d.png?width=400) |
| Project Finish |

### Layout

The **Layout** button also comes under the **Format** group which enables you to customize taskbar dependencies and appearance for better organization.
In the Gantt chart, you can configure the task layout with link line mode, taskbar height, date-text format, and round the taskbar to whole days.

![3.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.881884.png?width=300&verticalAlign=middle)

### Format

The **Format** button is available in the **Bar Styles** group, and it allows you to customize taskbar styles based on predefined rules and apply the selected style to all matching tasks.
The **Format** button contains two sub-items: **Bar** and **Bar Styles**.

![4.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/4.d2e474.png?width=800&verticalAlign=middle)

When you click **Bar**, the **Format Bar** dialog appears. Here, you can customize the bar shape and text for the selected taskbar. Note that if more than one task is specified, the modifications will be applied only to the first task selected, by default.

![5.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.7ac9f6.png?width=600&verticalAlign=middle)

![6.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/6.a923db.png?width=600&verticalAlign=middle)

Currently, only the information provided in the column can be set as bar text on the taskbar.

![7.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/7.261cc0.png?width=800&verticalAlign=middle)

On the other hand, if you click **Bar Styles**, the **Bar Styles** dialog appears. SpreadJS provides a total of 15 predefined taskbar styles. You can change the style of a certain taskbar by specifying style rules, and the changes will be applied to all tasks that match the rule. Note that if a taskbar has its own style, that style will be applied first.

![8.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/8.c53717.png?width=800&verticalAlign=middle)

For more information on gridlines, taskbar formatting styles, and customization options, you can also refer to the [Gridlines](/spreadjs/docs/features/ganttsheet/gridlines), [Task Layout](/spreadjs/docs/features/ganttsheet/task-layout), and [Taskbar Styles](/spreadjs/docs/features/ganttsheet/taskbar-styles) pages.