Is it possible to apply gradient color based on min and max value in Angular Grid?

[Samir Modi]

Hi,

Is it possible to apply gradient color based on min and max value? Min being red and max being green and rest other values with a gradient. I have a percentage column and i need to show different colors based on value. I saw below example in documentation for customiseCell event

customiseCell(args: QueryCellInfoEventArgs) { 

        if (args.column.field === 'Freight') { 

            if (args.data['Freight'] < 80) { 

                args.cell.style.backgroundColor ="greenyellow" ;           // setting style directly 

            }  

        } 

   } 

The thing is it only expects a fixed color based on a range of value. I need to have a gradient from 0 to 100.

Thanks.

[Manivel Sellamuthu]

Hi Samir, 

Greetings from Syncfusion support. 

Yes. You can apply the gradient colors as per your requirement. You can get the cell in the queryCell info event of the Grid. You can apply the required styles in the cell. Please refer the below code ecample and sample for more information. 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' (queryCellInfo)="queryCellInfo($event)"> 

. . . 

    </ejs-grid> 

</div> 

    queryCellInfo (args) { 

      if (args.column.field === 'Percentage') { 

        if (args.data.Percentage === 0.5) 

//in the args.cell we can get the html table element and apply the required styles 

 args.cell.style.backgroundColor = "#a98e8e"; 

  if (args.data.Percentage === 0.2) 

 args.cell.style.backgroundColor = "#75947e"; 

   if (args.data.Percentage === 0.9) 

 args.cell.style.backgroundColor = "rgb(100, 20, 26)"; 

   if (args.data.Percentage === 0.45) 

 args.cell.style.backgroundColor = "beige"; 

   if (args.data.Percentage === 0.8) 

 args.cell.style.backgroundColor = "hsl(120, 100%, 50%)"; 

      } 

    } 

Sample: https://stackblitz.com/edit/angular-eajzrc?file=app.component.ts 

Please let us know, if you need further assistance. 

Regards, 

Manivel