Another way to change the color of the critical path feature.

[cho jaehee]

Hello~
We're a solution company using Bryntum Gantt.

We know that when the criticalPath feature is enabled, the taskbar and path (arrow) are displayed in red. However, in our solution, we set the taskbar color based on the task status. In this case, the taskbar color doesn't change even when the criticalPath feature is enabled (using the console command: gantt.features.criticalPaths.disabled = false;).

So, I have a few questions:

1. Is there a way to control the taskbar border color?
   (I want to indicate the critical path without changing the existing colors.)
2. For criticalPath, what's the method to force the color to display in red?
3. When each taskbar uses a different color, what's a good way to indicate the criticalPath?

Please check and let us know.

[ghulam.ghous]

Is there a way to control the taskbar border color?

At the moment there is no border, the border width is set to 0. But you can override it:

		.b-ganttbase.b-gantt-critical-paths .b-gantt-task.b-critical {
			border-color : blue !important;
			border-width : 2px !important;
		}

For criticalPath, what's the method to force the color to display in red?

We apply b-critical to the tasks which are critical and then we already have css which applies this color. But you can control it using:

		.b-ganttbase.b-gantt-critical-paths .b-gantt-task.b-critical {
			background-color : // your color
		}

When each taskbar uses a different color, what's a good way to indicate the criticalPath?

I believe that is upto the end user. We mark it with the red color to show the criticality. You can have any other color to indicate this or as you said above a different border color.

[cho jaehee]

Thank you for your kind response.
However, if we modify the CSS, the code might be missing when we deploy a new version of the gantt.
Is there a way to handle this in app.js?

[tasnim]

Hi there,

Two simple ways to do it from app.js (no external CSS file edits):

1) Inject CSS at runtime (recommended for global override)

const s = document.createElement('style');
s.textContent = `
.b-ganttbase.b-gantt-critical-paths .b-gantt-task.b-critical {
  border: 2px solid red !important;
  /* or use background/border changes you need */
}
`;
document.head.appendChild(s);

2) Control per-task appearance in taskRenderer (fine if you can detect “critical” in data or compute it)

new Gantt({
  // ...
  taskRenderer({ taskRecord, renderData }) {
    if (taskRecord.critical) {
      renderData.style = 'box-shadow: inset 0 0 0 2px red'; // or renderData.cls = 'my-critical';
    }
    return taskRecord.name;
  }
});

See the taskRenderer docs for options you can set: taskRenderer.

[cho jaehee]

Hello, it's been a while.

We are displaying data from our database in the Gantt chart.
We want to store the criticalPath information in the DB as well, but it seems that some tasks are missing from the criticalPath result.

In the screenshot, the critical path looks like it contains more than 20 tasks, but the actual criticalPaths data retrieved from the Gantt only includes 15 tasks.
It appears that only the tasks connected with the red critical-path arrows are included in the criticalPaths list.

Is there a way to also retrieve tasks that are part of the critical path but are not connected with the red arrows?

used comment

const set = new Set();
for (let i = 0; i < xgantt.project.criticalPaths.length; i++) {
    var ids = "";
  for (let j = 0; j < xgantt.project.criticalPaths[i].length; j++) {
      ids += xgantt.project.criticalPaths[i][j].event.id + ",";
      set.add(xgantt.project.criticalPaths[i][j].event.id);
  }
    console.log(i + "row id list: " + ids);
}
console.log("distinct id list"); console.log(set);