# 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/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/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/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`.

> **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.

![gridlines_timescaleSeparator](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 the current date or the start and finish dates to give a clear picture of the project's scope. To change the gridline type and color of project schedule dates, set the `lineType` and `lineColor` properties for `projectStart`, `projectFinish,` and `currentDate`.

> Note: In the Gantt chart area,
>
> * The projectStart gridline is covered by projectFinish and currentDate gridlines, respectively.
> * The projectFinish gridline is covered by currentDate gridline.
> * The bottomTierColumn, middleTierColumn, and topTierColumn gridlines are covered by projectStart, projectFinish, and currentDate 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.

![gridlines_startFinishProject](https://cdn.mescius.io/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_startFinishProject.5991d1.png?width=900)

### 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"
}
```

The output of the above code will look like below.

![gridlines_ganttrows](https://cdn.mescius.io/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_ganttrows.41c16d.png?width=900)