Taskbar Styles

In Gantt charts, taskbar styles play an important role in visualizing project data. By changing taskbar styles, you can increase the clarity and emphasis of specific tasks. You can modify the style of a specific taskbar using the specified style rules, and then the style will be applied to all tasks that match the rule. In a Gantt chart, you can customize the taskbars' color, shape, end type, patterns, and text using the GANTT CHART FORMAT > Format > Bar Styles option in the Spread Designer UI.

GS-barstyles

Note: The taskbar style can only be changed if a primary key exists.

Built-in Taskbar Types

The type of a taskbar based on its field values. For example, if you change the "Mode" field of a normal task from "Auto" to "Manually", the task will change to a manually scheduled task, and then it will display different styles to separate itself from other normal taskbars.

The modified taskbar styles always correspond to the specific taskbar type. The following table lists the rule names for each task types.

Name	Show For	From	To
task	Normal tasks, not manually scheduled	Task Start	Task Finish
progress	Normal tasks, not manually scheduled	Task Start	Complete Through
manualTask	Normal tasks, manually scheduled	Task Start	Task Finish
manualProgress	Normal tasks, manually Scheduled	Task Start	Complete Through
milestone	Milestone tasks, not manually scheduled	Task Finish	Task Finish
summary	Summary tasks, not manually scheduled	Task Start	Task Finish
manualSummary	Summary tasks, manually scheduled	Task Start	Task Finish
projectSummary	Project Summary	Task Start	Task Finish
durationOnly	Active tasks, manually scheduled, but not a Milestone task	Task Start	Task Finish
startOnly	Manually scheduled, not Milestone tasks	Task Start	Task Start
finishOnly	Manually scheduled, not Milestone tasks	Task Finish	Task Finish
manualMilestone	Milestone tasks, active, manually scheduled	Task Finish	Task Finish
durationOnlyMilestone	Milestone tasks, manually scheduled	Task Finish	Task Finish
startOnlyMilestone	Milestone tasks, manually scheduled	Task Start	Task Start
finishOnlyMilestone	Milestone, Manually Scheduled	Task Finish	Task Finish

Get Built-In Style Rules

SpreadJS provides several built-in style rules for each taskbar type based on GC.Spread.Sheets.GanttSheet.TaskbarStyleRuleName type. Each taskbar has Start, Middle, and End areas that can be customized independently. Taskbar start and end areas allow changes to shape, type, and color, whereas the middle area customization includes options for shape, pattern, and color. Moreover, you can also add text information on different sides of a taskbar, such as left, right, top, bottom, and inside.

Example 1

The following code samples show how to change the color of a taskbar start area and add left and top texts for a taskbar. Here, the getRule() method of the taskStyleRules collection is used to get the style rule and then the taskbar style of the target style rule is updated with the modified style object.

// Change the color of the taskbar start area.
var targetBuiltInStyleRuleName = "task";
var targetStyleRule = ganttSheet.project.taskStyleRules.getRule(targetBuiltInStyleRuleName);
var targetStyle = targetStyleRule.style.taskbarStyle;
targetStyle.startColor = "red";
targetStyleRule.style.taskbarStyle = targetStyle;

// Configure left text and top text.
var targetBuiltInStyleRuleName = "task";
var targetStyleRule = ganttSheet.project.taskStyleRules.getRule(targetBuiltInStyleRuleName);
var targetStyle = targetStyleRule.style.taskbarStyle;
targetStyle.leftText = "taskNumber";
targetStyle.topText = "=[@duration]";
targetStyleRule.style.taskbarStyle = targetStyle;

Let's have another example to get a task instance from the project, and then update the taskbar styles with some specific fields using the GC.Spread.Sheets.GanttSheet.TaskbarStyle type.

Example 2

// Get the style of a task and change its style properties.
var task = ganttSheet.project.getTask(8);
console.log(task);
var newBarStyles = {};
newBarStyles["summary"] = {
      taskbarStyle: {
             startShape: "lineShape",
             startType: "solid",
             startColor: "Red",
             middlePattern: "diagonalLeft",
             middleShape: "rectangleBar",
             middleColor: "Yellow",
             endShape: "lineShape",
             endType: "solid",
             endColor: "Green",
             leftText: "taskNumber",
             bottomText: "duration",
             topText: '="Task Name: " & [@name]',
       }
}
task.style = newBarStyles;

var summaryTask = ganttSheet.project.getTask(4);
var summaryTaskStyles = {};
summaryTaskStyles["summary"] = {
        taskbarStyle: {
               startShape: "triangleRight",
               startType: "dashed",
               startColor: "#3a5823",
               middlePattern: "lineVertical",
               middleShape: "rectangleMiddle",
               middleColor: "#579863",
               endShape: "triangleLeft",
               endType: "dashed",
               endColor: "#3a5823",
               topText: "duration",
        }
}
summaryTask.style = summaryTaskStyles;

The output of the above code will look like below.

GS-taskbarStyles

Create Custom Style Rules

SpreadJS also allows you to create a custom style rule based on the GC.Spread.Sheets.GanttSheet.TaskbarStyleRule class. Once created, taskbar style rule will change the style of tasks that match the rule.

// Create new the custom style rule.
var ruleName = "My Progress";
class MyProgressRule extends GC.Spread.Sheets.GnattSheet.TaskBarStyleRule {
    constructor() {
        super(ruleName);
        this.style = {
            taskbarStyle: {
                middleColor: "#3B87D4",
                middleShape: "rectangleMiddle",
                middlePattern: "solidFill"
            }
        };
    }
    match(task: GC.Spread.Sheet.GanttSheet.Task): boolean {
        return task.complete > 0;
    }
    getFromDate(task: GC.Spread.Sheet.GanttSheet.Task) {
        return task.startDisplayed;
    }
    getToDate(task: GC.Spread.Sheet.GanttSheet.Task) {
        return task.completeThrough;
    }
}

// Add the custom style rule to the taskbar style rule collection.
var styleRules = ganttSheet.project.taskStyleRules;
var customStyleRule = new MyProgressRule();
styleRules.add(customStyleRule);

// Update an existing custom style rule.
var ruleName = "My Progress";
var styleRules = ganttSheet.project.taskStyleRules;
var customStyleRule = styleRules.getRule(ruleName);
if (customStyleRule) {
    var style = customStyleRule.style.taskbarStyle;
    // Update style.
    style.middleColor = "red";
    // Change style.
    customStyleRule.style.taskbarStyle = style;
}

Remove Custom Style Rules

In addition to adding or updating the style of taskbar style rules, you can also delete or clear rules using the remove() and clear() methods of the TaskStyleRules collection of the GC.Spread.Sheets.GanttSheet.Project class.