Gridlines

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.

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

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.

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

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.

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