Grid widget variance color


I need to change color of the variance in the grid widget. But it needs to be changed just for this specified widget not for all the widgets. Is it possible to do that?

UX version is

Thanks in advance


Hi @acandan ,

What exactly are you trying to change here?

  • Cell background color?
  • Number (font) color?
  • Cell (bar) chart’s color?
  • Add a border like fiili / butce?

In any case, you can define a new class in the custom css folder and call in this widget from settings.

You could use conditional formatting for the column.
With specific class name attached e.g “custom-variance-color”
add following to the apq-c3-custom\css\custom-style.css

grid-table .handsontable .custom-variance-color > div > div.progress.apq-c3-absolute-values > div.progress-bar.progress-bar-success{
    background-color: #c7178c !important  
grid-table .handsontable .custom-variance-color > div > div.progress.apq-c3-absolute-values > div.progress-bar.progress-bar-danger{
    background-color: #17c72f !important  

Add the following to the Widget Advanced Options

   "columnFormat": { 
      "Some Column Name": [
          "className": "custom-variance-color"

Screen Shot 2021-04-17 at 12.38.54 pm

Notice the success progress-bar is now pink change the css for desired outcome.
You could even apply conditions to only have the class custom-variance-color to be loaded if the cell value is above eg.2,000
Good luck,
Ilia Shapiro

1 Like