Resource view bubble colors customization

Gantt chart allows you to customize the colors of Resource view allocation bubbles, which creates a more intuitive, efficient, and visually clear resource allocation tracking system.

TABLE OF CONTENTS

• Script - Block Widget
• Gantt Config Script

Script - Block Widget

To start, add a Script - block widget on the page where your Gantt chart is displayed and insert the following CSS code:

<style>
.resource_marker .marker_ok { 
    background-color: black !important;
    color: red  !important; 
} 

.resource_marker .marker_over { 
    background-color: #FF8686;
    color: orange;
}
</style>

• marker_ok: Overwrites the marker that indicates allocation as OK (default green bubble). 
• marker_over: Overwrites the marker where allocation is overloaded (default red bubble).

By changing background-color and color, you can apply any color combination that suits your needs. 

Here is an example:

Gantt Config Script

Starting with Gantt version 25.3.2, you may use a more dynamic approach to customizing the bubble colors.

This feature applies to Resource Load Calculations of the types 'Estimate + Spent' and 'Remaining Estimate'.

Add the following code snippet to Advanced > Gantt Config Script.  

nextedy.gantt.config.resourceMarkersColorConfig = {percentages: [50,100,150], colors: ['lightgreen','#51c185','orange','#ff8686']} 

Please make sure to follow these requirements to ensure the script works:

• less than or equal to 50% → lightgreen
• more than 50% and less than or equal to 100% → #51c185
• more than 100% and less than or equal to 150% → orange
• more than 150% → #ff8686

For any assistance, please don’t hesitate to reach out by submitting a ticket here.