Hello
Share it here as it may interest some of you
I was able to use the sparkline cell renderer to include a progress bar inside my grid
Here how to configure the column and the 2 JS code :
gb.configure_column(‘PercentageProgress’, editable=True, type=[“numericColumn”, “numberColumnFilter”, “customNumericFormat”], precision=0, aggFunc=‘avg’, valueGetter=sparkline_data, cellRenderer=‘agSparklineCellRenderer’, cellRendererParams=sparkline_params)
sparkline_params = JsCode(“”"
function(params) {
return {
sparklineOptions: {
type: ‘bar’,
valueAxisDomain: [0.0, 100.0],
highlightStyle: {
fill: ‘rgb(236, 195, 11)’,
},
label: {
enabled: true,
placement: ‘outsideEnd’,
color: ‘black’,
fontSize: 10,
fontWeight: ‘bold’,
formatter: function (params) {
return parseFloat(params.value).toLocaleString(‘en’,{minimumFractionDigits: 0, maximumFractionDigits: 0});
},
},
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
valueAxisDomain: [0, 100],
axis: {
strokeWidth: 0,
},
tooltip: {
enabled: false,
},
formatter: function (params) {
const { yValue } = params;
return {
fill: yValue <= 20 ? ‘#e45c4b’ : yValue < 60 ? ‘#fdcf3d’ : ‘#74b683’,
};
},
}
};
};
“”")
sparkline_data = JsCode(“”"
function(params) {
return [parseInt(params.data.PercentageProgress)];
}
“”")
Result
Enjoy