> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Resource Allocation Marker Colors

> Customize the color coding of resource allocation markers in the Nextedy GANTT resource view to visually distinguish between within-capacity, over-allocated, and under-allocated states.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## 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**.

<Steps>
  <Step title="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 State | Default Color | Meaning                                          |
    | ---------------- | ------------- | ------------------------------------------------ |
    | Within capacity  | Green         | Resource workload is at or below available hours |
    | Over-allocated   | Red/Orange    | Resource 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](/gantt/reference/css-classes) for the marker DOM structure.
  </Step>

  <Step title="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**:

    ```javascript theme={null}
    gantt.config.resourceMarkersColorConfig = {
      ok: "#2196F3",
      over: "#E53935"
    };
    ```

    This sets within-capacity markers to blue and over-allocated markers to red.
  </Step>

  <Step title="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.

    ```javascript theme={null}
    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`)

    <Warning title="Array Length Constraint">
      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.
    </Warning>

    <Warning title="Ascending Order Required">
      The `percentages` array must contain numbers in **ascending order**. Non-ascending values trigger a validation error.
    </Warning>
  </Step>

  <Step title="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.

    <Tip title="Per-Widget Override">
      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.
    </Tip>
  </Step>
</Steps>

## How Resource Load Modes Affect Markers

The marker display varies depending on the configured `resourceLoadMode`:

| Load Mode    | Marker Shows                    | Color Trigger                   |
| ------------ | ------------------------------- | ------------------------------- |
| `num`        | Task count per resource per day | Exceeds item threshold          |
| `time`       | Allocated hours per day         | Exceeds available working hours |
| `remaining`  | Remaining capacity (hours)      | Negative value (overallocation) |
| `allocation` | Percentage of capacity used     | Exceeds 100%                    |

<Warning title="Zoom Level Affects Marker Aggregation">
  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.
</Warning>

## 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

* [Set Up the Resource View](/gantt/guides/resources/resource-view)
* [Configure Item Colors](/gantt/guides/visualization/configure-colors)
* [Customize Progress-Related Coloring](/gantt/guides/visualization/progress-coloring)
* [Mark Tasks Without Resource Allocation](/gantt/guides/resources/no-allocation-marking)

<LastReviewed date="2026-07-07" />