Skip to main content

​
Prerequisites

Before configuring marker colors, ensure the resource view is enabled on your Gantt widget. Navigate to Widget Properties > Resource View and set Show Resource View to Yes.
1

Understand the Default Colors

The Gantt resource view uses color-coded markers in each time cell to communicate allocation status at a glance. The default colors are:
Allocation StateDefault ColorMeaning
Within capacityGreenResource workload is at or below available hours
Over-allocatedRed/OrangeResource workload exceeds available hours
Markers are rendered with the resource_marker resource_marker_variable_color classes, and each cell’s color is applied through an inline --marker_color custom property computed from the allocation value — there are no separate ok/over element classes to target. See Resource View CSS Classes for the marker DOM structure.
2

Configure Colors via `resourceMarkersColorConfig`

You can override the default marker colors by providing a custom resourceMarkersColorConfig object. This configuration accepts ok and over properties defining CSS color values.Add the following to Widget Properties > Advanced > Gantt Config Script:
gantt.config.resourceMarkersColorConfig = {
  ok: "#2196F3",
  over: "#E53935"
};
This sets within-capacity markers to blue and over-allocated markers to red.
3

Configure Multi-Threshold Colors

For more granular color coding, you can define multiple color thresholds using the colors and percentages arrays. The percentages array defines breakpoints (in ascending order), and the colors array defines the color for each range.
gantt.config.resourceMarkersColorConfig = {
  percentages: [50, 100],
  colors: ["#4CAF50", "#FB8C00", "#E53935"]
};
This configuration produces three zones:
  • 0-50% allocation: Green (#4CAF50)
  • 50-100% allocation: Orange (#FB8C00)
  • Over 100% allocation: Red (#E53935)
The colors array must contain exactly one more element than the percentages array. If the arrays are mismatched, the Gantt displays a validation error both in the wiki editor and in view mode.
The percentages array must contain numbers in ascending order. Non-ascending values trigger a validation error.
4

Apply Colors Globally via Configuration Properties

To set default marker colors across all Gantt widgets in your project, navigate to Administration > Configuration Properties and define the color configuration there rather than in individual widget scripts.
Colors set in the Gantt Config Script of a specific widget override global Configuration Properties values. Use global properties for organization-wide defaults and widget-level scripts for exceptions.

​
How Resource Load Modes Affect Markers

The marker display varies depending on the configured resourceLoadMode:
Load ModeMarker ShowsColor Trigger
numTask count per resource per dayExceeds item threshold
timeAllocated hours per dayExceeds available working hours
remainingRemaining capacity (hours)Negative value (overallocation)
allocationPercentage of capacity usedExceeds 100%
When you zoom out, time cells span wider date ranges. Allocation values are aggregated across the wider range, which can cause markers to appear red at lower zoom levels even if individual days are within capacity. Set your threshold values based on the zoom level your team typically uses.

​
Verification

You should now see color-coded resource allocation markers in the resource view below the Gantt chart. Within-capacity cells display in your configured ok color, and over-allocated cells display in your configured over color. If you used multi-threshold colors, intermediate allocation levels display the corresponding middle color. If you see a validation error instead of colored markers, verify that your colors array has exactly one more element than your percentages array and that percentages are in ascending order.

​
See Also

Last modified on July 10, 2026