Skip to Content

UI5 Gantt chart color based on condition

Dec 01, 2017 at 11:38 AM


avatar image

Hi experts,

How can I set the fill color of a Gantt chart shape based on the value of a property in the bound json model?

Here's the code I am using to configure the sap.gantt.config.Shape :-

var oRectangle = new sap.gantt.config.Shape({
    key: "Rectangle",
    shapeDataName: "schedule",
    shapeClassName: "sap.gantt.shape.Rectangle",
    shapeProperties: {
        time: "{startTime}",
        endTime: "{endTime}",
        height: 32,
        fill: "green",
        title: "{name}",
        level: 0

The use case I am trying to address is :-

If there are 4 or more schedules, then fill the shape with GREEN else fill YELLOW.

I have already tried expression binding like :

fill: "{= ${data>/schedule}.length > 4 ? 'green' : 'yellow' }"

But that didn't give any result and filled the shape with the default BLACK color.

Is there some other way of getting it possible?

Also, is there a way we can configure Gantt shapes in XML views itself ratherer than doing all these configurations the in controller?

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Iftah Peretz
Dec 01, 2017 at 09:10 PM


You are passing "this" to the config function (which the snippet is from) and if not then you have a direct access to the data. So then all you need to do is something along these lines

var fillColor = "green";
if (some condition based on the data)
   fillColor = "yellow";
fill: fillColor,
Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Iftaz,

But the snippet I have provided here is written in the onInit function and hence called only once and not inside some kind of loop.

What I am looking for is some way of binding the fill property to the result condition.


So set that variable to be global, such as window.fiilColor. Be aware of all the repercussions of using such method.