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

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

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

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