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.

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

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

Example

// 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 TaskStyleRules() methods of the GC.Spread.Sheets.GanttSheet.Project class.