Color and Styling Properties - Nextedy Documentation

Static vs. Dynamic Coloring

The Gantt supports two coloring modes that determine how task bar colors are applied:

Dynamic coloring (default): Task bars display progress-based colors (overdue, progress-due, resolved) that override the default color. Use task.taskColor in the Item Script to change the base color while keeping progress color overrides active. Static coloring: Set gantt.config.show_progress_colors=false in the Gantt Config Script to disable progress-based color overrides. Use task.color in the Item Script to set the final task bar color directly.

In dynamic mode, task.taskColor changes only the default (blue) base color — progress-related colors still override it for overdue or resolved tasks. In static mode, task.color sets the absolute color with no overrides. Mixing them incorrectly produces unexpected results.

Progress Color Properties

These administration properties control the colors applied to task bars based on their scheduling status when dynamic coloring is active:

Name	Type	Default	Description
`nextedy.gantt.default.progress_color_overdue`	String	`red`	Color applied to task bars where the end date is in the past (task is overdue).
`nextedy.gantt.default.progress_color_progressdue`	String	`orange`	Color applied to task bars where the progress date is in the past (progress is behind schedule).
`nextedy.gantt.default.progress_color_resolved`	String	`gray`	Color applied to task bars that are in a resolved status.

Set these properties in Administration > Configuration Properties to apply globally:

nextedy.gantt.default.progress_color_overdue=red
nextedy.gantt.default.progress_color_progressdue=orange
nextedy.gantt.default.progress_color_resolved=gray

Alternatively, set them per Gantt instance in the Gantt Config Script:

gantt.config.progress_color_overdue = "#e53935";
gantt.config.progress_color_progressdue = "#fb8c00";
gantt.config.progress_color_resolved = "#0AA33A";

Unplanned Item Colors

Name	Type	Default	Description
`nextedy.gantt.workitems.unplanned_color`	String	`#7D3C98`	Background color of unplanned task bars (items without a start date).
`nextedy.gantt.workitems.unplanned_color_fg`	String	See application	Foreground (text) color of unplanned task bars.

Today Marker Color

Name	Type	Default	Description
`nextedy.gantt.today.color`	String	`gray`	Color of the vertical “today” marker line on the Gantt chart.

Resource Marker Colors

The resource view uses color-coded markers to indicate resource allocation levels. The resourceMarkersColorConfig object defines the color scheme:

Property	Type	Default	Description
`ok` color	String	`#4CAF50` (green)	Color for resource markers within capacity. Applied via the `marker_ok` CSS class.
`over` color	String	Red/orange gradient	Color for resource markers that exceed capacity. Applied via the `marker_over` CSS class.
`percentages`	Array of numbers	See application	Ascending threshold values defining breakpoints for marker color changes.
`colors`	Array of strings	See application	Color values for each allocation level. Must be one element longer than the `percentages` array.

The colors array must have exactly one more element than the percentages array. The percentages array must contain numeric values in ascending order. Invalid configurations produce error messages in both view mode and the wiki editor.

Marker CSS Classes

The Gantt applies CSS classes to timeline markers based on their type:

CSS Class	Applied To	Description
`today`	Today marker	The vertical line marking today’s date on the timeline.
`plan`	Plan markers	Markers synced from plan (iteration) boundaries.
`marker_ok`	Resource markers	Resource allocation cells within capacity.
`marker_over`	Resource markers	Resource allocation cells exceeding capacity.

Custom markers defined without a specific color class receive the base marker styling. You can assign a named CSS color class (e.g., blue) to custom markers to override the default appearance.

Disabling Dynamic Coloring

To use purely static colors without progress-based overrides, add the following to the Gantt Config Script:

gantt.config.show_progress_colors = false;

Then use task.color in the Item Script to set colors based on your custom logic:

if (wi.getType().getId() === "workpackage" && wi.getStatus().getId() === "draft") {
    task.color = "#bfbfbf";
}

CSS-Based Styling

You can apply custom CSS styles to Gantt elements through the Parameters Script section. For example, to change the font color of task labels:

<style>
.gantt_task_content {
    color: #333333;
}
</style>

CSS class names and DOM structure may vary between Gantt versions. Verify the available CSS classes in your specific version. See CSS Classes and DOM Structure for a reference.

Configuration Example

To set up custom progress colors and disable dynamic coloring for a specific Gantt:

In Administration > Configuration Properties, add:

nextedy.gantt.default.progress_color_overdue=#e53935
nextedy.gantt.default.progress_color_resolved=#43a047
nextedy.gantt.workitems.unplanned_color=#c7cffb
nextedy.gantt.workitems.unplanned_color_fg=#001379

For a specific Gantt page that needs static coloring, add to the Gantt Config Script:
gantt.config.show_progress_colors = false;

In the Item Script, define the color logic:

if (wi.getType().getId() === "feature") {
    task.color = "#42a5f5";
}

General Administration Properties — core behavior and scheduling properties
Item Script API — task.color and task.taskColor scripting reference
Gantt Config Script API — gantt.config.show_progress_colors and color overrides
Item Color Legend — visual reference for default color meanings
Resource View Parameters — resource marker configuration
CSS Classes and DOM Structure — Gantt CSS class reference

​Static vs. Dynamic Coloring

​Progress Color Properties

​Unplanned Item Colors

​Today Marker Color

​Resource Marker Colors

​Marker CSS Classes

​Disabling Dynamic Coloring

​CSS-Based Styling

​Configuration Example

​Related Pages

Static vs. Dynamic Coloring

Progress Color Properties

Unplanned Item Colors

Today Marker Color

Resource Marker Colors

Marker CSS Classes

Disabling Dynamic Coloring

CSS-Based Styling

Configuration Example

Related Pages