# Gridlines

An explanation of the gridlines in SpreadJS GanttSheets, including UI and code examples

## Content

Gridlines are the vertical and horizontal lines that make your Gantt chart more readable. They help to match up a Gantt chart taskbar with the corresponding task in the project table. You can change the appearance and interval styles of the gridlines to better reflect the scope of the project.

## Gridline Format Styles

Gridline formats have two styles:

* **Normal style**: This style has two format properties: `lineType` and `lineColor` of [GC.Spreadsheet.GanttSheet.GanttGridline](/spreadjs/api/v19/modules/GC.Spread.Sheets.GanttSheet#ganttgridline) interface.
* **At Interval** **style**: This style defines both the normal and alternating styles at the same time, inheriting the `lineType` and `lineColor` properties from the **Normal style**. It also includes `interval`, `intervalLineType`, and `intervalLineColor` properties of the [GC.Spread.Sheet.GanttSheet.GanttGridlineInterval](/spreadjs/api/v19/modules/GC.Spread.Sheets.GanttSheet#ganttgridlineinterval) interface to apply to the interval gridlines.

## Configurable Gridline Types

There are different categories of gridlines used in a Gantt chart. You can configure gridlines using the available properties of [GC.Spread.Sheets.GanttSheet.GanttGridlines](/spreadjs/api/v19/classes/GC.Spread.Sheets.GanttSheet.GanttGridlines) class as discussed in the below sections.

### Timescale Extension Gridline

This **Normal style** gridline separates timescale columns. To change the gridline type and color of timescale tier columns, set the `lineType` and `lineColor` properties for `topTierColumn`, `middleTierColumn`, and `bottomTierColumn`.

>type=note
> **Note**: In the Gantt chart area,
>
> * The bottomTierColumn gridline is covered by the middleTierColumn and topTierColumn gridlines respectively.
> * The middleTierColumn gridline is covered by the topTierColumn gridline.

The following code sample shows how to change the gridline of the bottom and middle tier columns.

```javascript
// Change gridline of bottom tier column with dashed type and yellow color.
ganttSheet.gridlines.bottomTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    lineColor: "yellow"
}
// Change gridline of middle tier column with dash-dot type and red color.
ganttSheet.gridlines.middleTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot,
    lineColor: "red"
}
```

The output of the above code will look like below.
![SpreadJS GanttSheet displaying yellow dashed bottom-tier and red dash-dot middle-tier gridlines that separate timescale columns for easier project schedule analysis.](https://cdn.mescius.io/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_timescaleSeparator.852f5a.png?width=900)

### Project Helper Gridline

This **Normal style** gridline highlights project-level dates in the Gantt chart, including the current date, status date, project start date, and project finish date. These gridlines help users identify important project reference dates and project boundaries.
To change the gridline type and color of project-level dates, set the `lineType` and `lineColor` properties for `currentDate`, `statusDate`, `projectStart`, and `projectFinish`.

>type=note
> Note: In the Gantt chart area,
>
> * The projectStart gridline is covered by projectFinish, currentDate, and statusDate gridlines respectively.
> * The projectFinish gridline is covered by currentDate and statusDate gridlines.
> * The bottomTierColumn, middleTierColumn, and topTierColumn gridlines are covered by projectStart, projectFinish, currentDate, and statusDate gridlines.

The following code sample shows how to change the gridline of the start and finish project.

```javascript
// Change gridline of project start with thin type and red color.
 ganttSheet.gridlines.projectStart = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin, 
    lineColor: "red"
};
// Change gridline of project finish with dashed type and aqua color.
ganttSheet.gridlines.projectFinish = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed, 
    lineColor: "aqua"
};
```

The output of the above code will look like below.
![SpreadJS GanttSheet marking project boundaries with a thin red project-start gridline and a dashed aqua project-finish gridline around the scheduled task range.](https://cdn.mescius.io/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_startFinishProject.5991d1.png?width=900)
The following code sample shows how to configure the Current Date and Status Date gridlines.

```javascript
// Change the Current Date gridline.
ganttSheet.gridlines.currentDate = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
    lineColor: "green"
};

// Set the project status date.
ganttSheet.project.statusDate = new Date(2026, 6, 27);

// Change the Status Date gridline.
ganttSheet.gridlines.statusDate = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot,
    lineColor: "#5B9BD5"
};
```

![SpreadJS GanttSheet displaying a thin green Current Date gridline and a blue dash-dot Status Date gridline for comparing tasks against project reference dates.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260720.78dafe.png?width=400)
The Status Date gridline is displayed independently from the Progress Line. You can display the Status Date gridline without displaying a Progress Line, or use both together.
When displayed, the Status Date gridline is drawn at the right edge of the corresponding timescale cell so that it aligns with the Progress Line reference-date anchor.

### Taskbar Separation Gridline

This **At Interval** **style** gridline separates the task rows. You can add an interval gridline between rows to align the task rows and change their type and color by using the `interval`, `intervalLineType`, and `intervalLineColor` properties.
The following code sample shows how to change the interval gridline of ganttrows.

```javascript
// Change interval gridline of gantt rows to with dashed type and red color.
ganttSheet.gridlines.ganttRows = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
    lineColor: "blue",
    interval: 2,
    intervalLineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    intervalLineColor: "red"
}
```