# 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 options to customize taskbar appearance, gridlines, Progress Lines, layout, and text within the GanttSheet. When you insert a GanttSheet in SpreadJS, the **GANTT CHART FORMAT** tab appears by default.
![SpreadJS Designer displays the GANTT CHART FORMAT tab with Format and Bar Styles controls for customizing the active GanttSheet.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260720.b85efb.png?width=800)
The following table lists the sections available in this tab along with their descriptions:

| **Section** | **Description** |
| ------- | ----------- |
| **Format** | Provides options to configure gridlines, Progress Lines, and chart layout settings. |
| **Bar Styles** | Provides options to modify the style of specific taskbars using preset style rules. |

### Gridlines

The **Gridlines** button is available in the **Format** group. It allows you to adjust gridline settings for the Gantt chart, including timescale column gridlines, task row gridlines, and project-level date gridlines.
![SpreadJS Designer Gridlines dialog provides controls for configuring the type and color of gridlines and project date markers in GanttSheet.](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 | Description | Example |
| -------- | ----------- | ------- |
| Gantt Rows | Separates task rows in the Gantt chart area. | ![SpreadJS GanttSheet displays Gantt Rows gridlines that horizontally separate task records within the chart area.](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Gantt%20Rows.eda454.png?width=400) |
| Top Tier Column | Separates top-tier timescale columns. | ![SpreadJS GanttSheet displays Top Tier Column gridlines that separate the largest time units across the timescale header.](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Top%20Tier%20Column.0bb256.png?width=400) |
| Middle Tier Column | Separates middle-tier timescale columns. | ![SpreadJS GanttSheet displays Middle Tier Column gridlines that visually separate time units in the middle timescale tier.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260720.ad0be4.png?width=400) |
| Bottom Tier Column | Separates bottom-tier timescale columns. | ![SpreadJS GanttSheet displays Bottom Tier Column gridlines that separate the smallest visible time units across the chart area.](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Bottom%20Tier%20Column.2f4f02.png?width=400) |
| Current Date | Marks the project current date. | ![SpreadJS GanttSheet displays a Current Date gridline marking the configured project current date within the schedule.](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-CurrentDate.5e832e.png?width=400) |
| Status Date | Marks the project status-reporting date. | ![SpreadJS GanttSheet displays a Status Date gridline marking the configured project reporting date across the chart area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260720.3bf007.png?width=400) |
| Project Start | Marks the project start date. | @rows=2:![SpreadJS GanttSheet displays Project Start and Project Finish gridlines that identify the scheduled date boundaries of the project.](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/GS-Project%20StartandFinish.46b26d.png?width=400) |
| Project Finish | Marks the project finish date. |

### Progress Lines

The **Progress Lines** button is available in the **Format** group. It opens the **Progress Lines** dialog, where you can display a Progress Line and configure its reference date, path type, line style, progress point style, and date label.
A Progress Line is an analytical overlay that connects task progress points relative to a selected project reference date.
**![SpreadJS Designer provides the Progress Lines command in the GANTT CHART FORMAT tab for configuring a task-progress analysis overlay.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260720.b3dd41.png?width=800)**

#### Dates

The **Dates** tab controls whether the Progress Line is displayed and which project date is used as the reference date.
![SpreadJS Designer Progress Lines dialog displays Dates options for enabling the overlay and selecting the project status or current date.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260720.955c4d.png?width=400)

| Option | Description |
| ------ | ----------- |
| Display | Shows or hides the Progress Line. When this option is cleared, the Progress Line path, progress points, and date label are not displayed. |
| At project status date | Uses the project status date as the Progress Line reference date. The status date is set in **PROJECT** \> **Project Information**. If no status date is specified, the current date is used as the effective reference date. |
| At current date | Uses the project current date as the Progress Line reference date. The current date is set in **PROJECT** \> **Project Information**. |

#### Line Styles

The **Line Styles** tab controls how the Progress Line is routed and displayed.
![SpreadJS Designer Progress Lines dialog provides Line Styles settings for routing, color, progress points, and reference-date label formatting.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260723.a31ecb.png?width=400)

| Option | Description |
| ------ | ----------- |
| Progress line type | Sets how the Progress Line connects progress points. The available types combine whether the line returns to the reference date and whether the connections are diagonal or orthogonal. |
| Line type | Sets the line type of the Progress Line path. |
| Line color | Sets the color of the Progress Line path. The date label uses the same color. |
| Progress point shape | Sets the shape of the progress point displayed on task bars. |
| Progress point color | Sets the color of progress points. |
| Show date for each progress line | Displays a date label for the Progress Line. The label shows the active reference date. |
| Format | Sets the date format used by the Progress Line label. |
| Change Font | Sets the font used by the Progress Line date label. |

For more information about runtime Progress Line behavior, see [Progress Line](/spreadjs/docs/v19/features/ganttsheet/progress-line).

### 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.
![SpreadJS Designer Layout dialog configures dependency link lines, taskbar height, date-text formatting, and whole-day taskbar rounding in GanttSheet.](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**.
![SpreadJS Designer Format menu presents Bar and Bar Styles commands for customizing individual taskbars or applying rule-based styles.](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.
![SpreadJS Designer Format Bar dialog provides shape, pattern, type, and color controls for customizing the selected GanttSheet taskbar.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.7ac9f6.png?width=600&verticalAlign=middle)
![SpreadJS Designer Format Bar dialog assigns worksheet column information to text positions surrounding or inside the selected taskbar.](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.
![SpreadJS GanttSheet displays taskbar text populated from worksheet column information after the developer configures the selected bar’s text positions.](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.
![SpreadJS Designer Bar Styles dialog lists predefined taskbar styles and rules that apply formatting to every matching GanttSheet task.](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, Progress Lines, task layout, and taskbar formatting styles, see [Gridlines](/spreadjs/docs/v19/features/ganttsheet/gridlines), [Task Layout](/spreadjs/docs/v19/features/ganttsheet/task-layout), [Progress Line](/spreadjs/docs/v19/features/ganttsheet/progress-line), and [Taskbar Styles](/spreadjs/docs/v19/features/ganttsheet/taskbar-styles) pages.