Code for renderer as follows:
groupSummary : {
showTooltip:false,
summaries: [{
label:"Utilisation",
renderer : function renderer(renderRef){
if (renderRef.events.length>0){
let resourceList = that.schedulerResourceTimeRangeStore._data;
let resourceCount = resourceList.filter(record=>{
return (that.schedulerEngine.resourceStore.getById(record.resourceId).desk===renderRef.events[0].getResource().desk &&
moment(record.startDate).isBefore(moment(renderRef.endDate)) &&
moment(record.startDate).add(record.duration,"minutes").isAfter(moment(renderRef.startDate)));
}
).length;
let backgroundColor="#00FF00";
let utilPercent = Math.round((renderRef.events.length/resourceCount)*100);
if (utilPercent!==Infinity){
if (utilPercent>=60){
backgroundColor="#FFFF00";
}
if(utilPercent>=80){
backgroundColor="#FF0000";
}
}
else{
utilPercent="Inf";
backgroundColor="#FF0000";
}
let barHeight=utilPercent;
if (barHeight>100){barHeight=100;}
return "<div class='bar-outer'><div class='bar-inner' style='height:"+barHeight+"%;background-color: "+ backgroundColor + "'><label class='" + (utilPercent > 50 ? "b-summarybar-label-inside" : "") + "'>" + utilPercent + "%</label></div></div>";
}
else {
return "<div class='bar-outer'><div class='bar-inner' style='background-color: #00FF00'><label>0%</label></div></div>";
}
}
}]
}