# Gridlines

## 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.
There are three different categories of gridlines used in a Gantt chart. For all gridlines, the available properties are `lineType`, `lineColor`, `interval` of `GC.Spread.Sheets.GanttSheet.GanttGridlines` class. You can change the appearance and interval styles of the gridlines to better reflect the scope of the project.

## Timescale Extension Gridline

This 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`.
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://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_timescaleSeparator.852f5a.png?width=900)

## Project Helper Gridline

This 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`.
The following code sample shows how to change the gridline of 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://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_startFinishProject.5991d1.png?width=900)

## Taskbar Separation Gridline

This gridline separates the task rows. You can add interval gridline between rows to align the task rows and change its 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://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/gridlines_ganttrows.41c16d.png?width=900)