This can be achieved by using JS Link propery. You either specify the JS Link property for a field, view, or list view web part. Not all web parts have a JS Link property. You won’t be able to set it to an XsltListViewWebPart or any other web part that is not inherited from IListWebPart. The best approach, in my opinion, is setting the JS Link property of an SPView – this would work everywhere the view is being used.
Your JSLink file should have all logic regarding what color (or any customization) and on what conditions to assign. The following is an example, which changes cell's background based on the value of the field:
(function () {
var FieldContext = {};
FieldContext.Templates = {};
FieldContext.Templates.Fields = {
"CRiskRAG": {
"View": RAGTemplate,
'DisplayForm': null,
'NewForm': null,
'EditForm': null
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FieldContext);
})();
function RAGTemplate(ctx) {
var rag = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
switch (rag) {
case "Green":
return "<div style='background-color :#40f607'>" + rag + "</div>";
break;
case "Amber":
return "<div style='background-color :#f9af00'>" + rag + "</div>";
break;
case "Red":
return "<div style='background-color :#f93030'>" + rag + "</div>";
}
}
A while ago I wrote a post regarding customization of Gantt view. You can find it here. You might find some useful info there.
If you cannot do any coding, you can set JSLink property by powershell:
Field:
$web = Get-SPWeb http://site
$field = $web.Fields["Status"]
$field.JSLink = "/_layouts/15/Status.js"
$field.Update($true)
Or view:
$web = Get-SPWeb http://site
$list = $web.Lists["Tasks"]
$view = $list.Views["Gantt View"]
$view.JSLink = "/_layouts/15/Status.js"
$view.Update()