Bar renderer displays the value of data cell and the percentage of minimum and maximum range of renderer with the rectangular bar which starts with origin. The bar is drawn by GridStyles.shapeBackground and GridStyles.shapeBorder. The width of bar is determined by GridStyles.shpaeSize.
It specifies the type as "bar" when setting the column renderer.
var columns = [{
name: "Quantity",
fieldName: "quantity",
width: 60,
header: {
"text": "Quantity"
},
renderer: {
type: "bar",
minimum: 0,
maximum: 1000,
origin: "right"
}
},
...
];
grid.setColumns(columns);
}