Conditional Formating and Color Scale to grid

Suite and Optimus Suite 7
#1

How can I implement conditional formatting and color scaling to a grid in order to display different colors based on the values of the cells? Currently, I am able to color the maximum value of a column a certain color, but I would like to also color values that are a certain percentage of the maximum value a different color, in order to create a color scale.

Is there a way to access the maximum value of the cells and perform operations on it in order to set the color scale dynamically, as the maximum and minimum values of the cells change after a form is submitted? Alternatively, is there another method to achieve this?
conditional formating

#2

Hi, I don’t know if I understand exactly what you want, but I imagine you are using the mark property with the min/max objects to style, is that so?

It is also also possible to use mark passing a function, which receives the following values:
- cell - (required) the value of a cell;
- columnCells - (required) an array of all cell values in the specified column;
- row - (optional) an object with all cells in a row;
- col - (optional) an object with the configuration of a column (see the columns config).

That way, inside columnCells you can get the minimum and maximum value, either through a for or other means.

Here is the documentation link to check out:

Here is an example of using the mark property with the function:

I apologize if that’s not it, I hope it helps, hug.

1 Like
#3

Thank you for your response kind Douglas!
I want to change the color of the second greatest value of a column a different color, and the third greatest value a different color and so forth.

How would I access the second greatest value in a column so I can change it’s color?

#4

I made an example in a very rudimentary way, but you can understand:

https://snippet.dhtmlx.com/pw5x1ixx

You can do it in many other ways, but I just wanted to exemplify. Even because you intend to organize the colors according to the position of the line, right? then you will need to make the example more complex.
In case your logic gets too complex, consider decoupling the logic inside the ‘mark’ property, and make an external function that you will call on ‘mark’

1 Like