Gantt Chart Components

The Gantt chart is a special sheet column in GanttSheet that illustrates project schedules. It shows the start and finish dates of each task and typically adds information such as the completion state of each task and dependencies between tasks.

Gantt charts have two basic components, Timescale and Chart Area.

Timescale

Timescale represents the column header of a Gantt chart. It shows the smaller or greater time units, such as years, quarters, months, weeks, days and so on. The maximum time scale in a Gantt chart is year, and the minimum time scale is 15 minutes.

Timescale consists of three different tiers and a scale separator.

Timescale Tiers

Gantt chart has three tier modes, middle, middleBottom, and topMiddileBottom to show time scales. You can use the TimescaleTierMode enumeration to set the tier mode for the timescale.

The following code sample shows how to show the tier modes for timescale in a Gantt chart.

// Set the tier mode for the timescale.
   var timescale = ganttSheet.project.timescale; 
   timescale.tierMode = GC.Spread.Sheets.GanttSheet.TimescaleTierMode.middle;

A timescale tier has the following configurable properties.

The following sample code shows how to configure the middle tier properties.

// Set the tier configuration.
var timescale = ganttSheet.project.timescale;
var targetTier = "middleTier";
timescale[targetTier].unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.days;
timescale[targetTier].count = 2;
timescale[targetTier].labelAlign = "Center";
timescale[targetTier].formatter = "dddd";
timescale[targetTier].showTickLines = false;

Timescale Separator

You can also set the showScaleSeparator option to show the separate scale line between the topMiddleButtom and middle tiers. By default, this option value is True. To hide, you need to change the value of the showScaleSeparator option to false.

The following code sample shows how to hide the scale separator line.

// Hide scale separator.
ganttSheet.project.timescale.showScaleSeparator = false;

The Gif below demonstrates the configuration of timescale appearance in a Gantt chart.

Chart Area

The chart area refers to the body part of a Gantt chart. It enables you to show working and non-working time, configure chart layout, change taskbar styles, add task summary, show gridlines, link/unlink tasks etc. You can also change the layout styles, zoom in/zoom out the Gantt chart, and scroll the timescale horizontally or vertically to get a suitable view.

For configuring the chart area and its various features, refer to the below topics: