Bar Renderer

The Bar renderer displays the values of numeric column cells as bar boxes.
If you look at the column where the Bar renderer is set, you can see that the bar box is marked as Gradient.

Renderer properties

var columns = [
   ... skip ...
     {
       name: "Age",
       fieldName: "Age",
       width: "100",
       renderer: {
         type: "bar",
         origin: "left", //Direction of the bar box left, right, top, bottom
         maximum: 100, //maximum value
         minimum: 0, //minimum value
         barWidth: "80%" //Thickness of the bar box
       },
       header: {
         text: 'origin: "left"'
       }
     },
   ... skip ...
];
 
gridView.setColumns(columns);

Renderer style

The style of the bar box in the bar renderer is defined in realgrid-style.css.

.rg-bar-renderer {
     /*position: absolute; If you set it, it won't work in IE. */
     position: relative;
     width: 100%;
     height: 100%;
     left: 0px;
     top: 0px;
}
 
.rg-bar-renderer-bar {
     background: #2F8D27;
background: -webkit-linear-gradient(right, #96f58F, #2F8D27);
background: -moz-linear-gradient(right, #96f58F, #2F8D27);
background: -ms-linear-gradient(right, #96f58F, #2F8D27);
background: -o-linear-gradient(right, #96f58F, #2F8D27);
     background: linear-gradient(to left, #96f58F, #2F8D27);
}
 
.rg-bar-renderer-bar-right {
     background: #2F8D27;
background: -webkit-linear-gradient(left, #96f58F, #2F8D27);
background: -moz-linear-gradient(left, #96f58F, #2F8D27);
background: -ms-linear-gradient(left, #96f58F, #2F8D27);
background: -o-linear-gradient(left, #96f58F, #2F8D27);
background: linear-gradient(to right, #96f58F, #2F8D27);
}
 
.rg-bar-renderer-bar-top {
     background: #2F8D27;
background: -webkit-linear-gradient(bottom, #96f58F, #2F8D27);
background: -moz-linear-gradient(bottom, #96f58F, #2F8D27);
background: -ms-linear-gradient(bottom, #96f58F, #2F8D27);
background: -o-linear-gradient(bottom, #96f58F, #2F8D27);
background: linear-gradient(to top, #96f58F, #2F8D27);
}
 
.rg-bar-renderer-bar-bottom {
     background: #2F8D27;
background: -webkit-linear-gradient(top, #96f58F, #2F8D27);
background: -moz-linear-gradient(top, #96f58F, #2F8D27);
background: -ms-linear-gradient(top, #96f58F, #2F8D27);
background: -o-linear-gradient(top, #96f58F, #2F8D27);
background: linear-gradient(to bottom, #96f58F, #2F8D27);
}

If you want to change the color of the bar box, you can refer to the realgrid-styels.css file and add CSS styles.
Let's change the color of each bar box in the column to solid Red, Green, Blue, and Yellow instead of linear-gradient.

add style below

.red-bar-solid .rg-bar-renderer-bar {
   background: #ff0000;
}
 
.green-bar-solid .rg-bar-renderer-bar-right {
   background: #00ff00;
}
 
.blue-bar-solid .rg-bar-renderer-bar-top {
   background: #0000ff;
}
 
.yellow-bar-solid .rg-bar-renderer-bar-bottom {
   background: #ffff00;
}

Multicheck renderer Image renderer