Replace color dynamically according to conditions

Inserting color conditionally is possible only with the formatter :ifEqual. It takes 3 arguments, in order:
value to test the equality (ex: true, false, -1, 0, etc...)
the value to return if the value is valid, it can be a Carbone tags
the value "true", it is required to make the condition work inside the bindColor.

It is not working with conditions formatters :ifEQ, :ifNEM, ifGT, etc...

Example

In this situation, we want to apply a background color dynamically on the {d.name} tag. First of all, we have to apply a temporary red background color on the element.



Just bellow the red tag, the bindColor tag is inserted:
{bindColor(#ff0000, #hexa) = d.cond:ifEqual(true, .color1, true):ifEqual(false, .color2, true)}

Based on the following JSON data-set:

{
  "name" : "Elon Tusk",
  "cond"  : true,
  "color1" : "#00FF00",
  "color2": "#0000FF",
}

If the cond value is true, the hexadecimal color .color1 will be applied, otherwise it applies .color2.
It is also possible to chain more ifEqual formatters with new colors if necessary.

To learn more about the bindColor, check out our documentation

And voila, we successfully replaced the color 🎉

Updated on: 09/09/2022