Ag grid cell linear gradient color based on max and min value

Question

If you look in to the below table, I have the color code as gradient (Dark Green to Dark Red from min to max values), this is a feature available in excel formatting. how can achieve this in Ag grid?

Answer 1

You can use a cellStyle function to change the style of a cell, as described here.

Now, in order to apply a gradient effect between cells, I'll assume that the minimum and maximum values for the column you wish to style are known and that the values are of type number, not string.

I've put a Plunker here as a demo: https://plnkr.co/edit/WVCvkvCFhXB6tiWH. The values are shuffled, but you can click the column header to sort them. It's written in React, so you may have to make a few changes depending on the library or framework you use. The gist of this example is:

1. Find the minimum and maximum values of the column you wish to style.
2. In the column you want to style add a function that:

   1. Calculates the weight which tells us how close we are to the maximum value. 0 means that the value is the smallest possible, 1 means that the value is the highest possible.

   2. Applies weight to each 1 of the 3 RGB channels, like this:

      weight * finalChannelValue + (1 - weight) * initialChannelValue

      For instance: if you want to color the minimum value's background with rgb(198, 57, 9), and the maximum value with rgb(36, 114, 76), write this:

      let red = weight * 36 + (1 - weight) * 198;
      let green = weight * 114 + (1 - weight) * 57;
      let blue = weight * 76 + (1 - weight) * 9;
      

   3. And finally, returns an object with the styles to apply on the cell - in this case backgroundColor:

      return { backgroundColor: `rgb(${red}, ${green}, ${blue})` };
      

Once again, this assumes that the numbers in the cells are indeed numbers, and not strings. If they are strings, you might want to try parseInt() or parseFloat() first to convert them into numbers.