Skip to Content

UI5 Gantt chart color based on condition

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?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • 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,
    Add comment
    10|10000 characters needed characters exceeded