'I am using ag-grid enterprise licensed controls and want to use ag-grid BarSparklines inside grid cells
I had followed every step of ag-grid documentation as stated in link below:
https://www.ag-grid.com/angular-data-grid/sparklines-bar-customisation/
My grid cells definition is as follows:
this.immediatecolumnDefs =
[
{
field: 'ncrdetail',
headerName: 'NCR Detail',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'product',
headerName: 'Product Description',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'totalholdqty',
headerName: 'Total Hold Qty',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'holdqty',
headerName: 'Balance Qty',
hide: true,
// sortable: true,
// resizable: true,
// filter: true,
},
{
field: 'ncrdate',
headerName: 'NCR Date',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'status',
headerName: 'Status',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'sorting',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: 'orange', // sets the highlighted bar fill
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'reprocess',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'concession',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'downgrade',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'dispose',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} as BarSparklineOptions,
},
},
{
field: 'action',
headerName: 'Action',
sortable: true,
resizable: true,
filter:
true,
cellRenderer: (): any => {
return `
<button mat-mini-fab="" color="warn" ptooltip="Action History" tooltipposition="top" class="mat-focus-indicator mat-mini-fab mat-button-base mat-primary" style="background-color: #7a1dcf;" ng-reflect-color="primary" ng-reflect-text="Action Detail" ng-reflect-tooltip-position="top"><span class="mat-button-wrapper"><i class="fa fa-list" style="color: #fff;"></i></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round" ng-reflect-disabled="false" ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></span><span class="mat-button-focus-overlay"></span></button>
`;
},
cellRendererParams: {
clicked(field: any): any {},
},
},
];
Data which I am passing is given below:
this.immediaterowData = [
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-enter code here02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]}
];
I want bars in sorting, reprocess, concession, downgrade and dispose columns but i am receiving it like this: enter image description here
Solution 1:[1]
Your code works when I use it in as a plunker based on the first example of the AG Grid documentation you provided.
https://plnkr.co/edit/ZV7CpSmBiYtSPmIv
Are you completely sure you are using the enterprise version of AG Grid?
function getData() {
return [
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-enter code here02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]},
{ id:0, ncrdate:'2022-02-26 18:26:00', ncrdetail:'', status:'test', product:'test', totalholdqty:5000, sorting:[0.1,0.9], reprocess:[0.5,0.5], concession:[0.4,0.6], downgrade:[0.2,0.8], dispose:[0.3,0.7]}
];
}
const gridOptions = {
columnDefs: [
{
field: 'ncrdetail',
headerName: 'NCR Detail',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'product',
headerName: 'Product Description',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'totalholdqty',
headerName: 'Total Hold Qty',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'holdqty',
headerName: 'Balance Qty',
hide: true,
// sortable: true,
// resizable: true,
// filter: true,
},
{
field: 'ncrdate',
headerName: 'NCR Date',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'status',
headerName: 'Status',
sortable: true,
resizable: true,
filter: true,
},
{
field: 'sorting',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: 'orange', // sets the highlighted bar fill
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
},
},
},
{
field: 'reprocess',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
},
},
},
{
field: 'concession',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
},
},
},
{
field: 'downgrade',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} ,
},
},
{
field: 'dispose',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
type: 'bar',
fill: '#5470c6',
stroke: '#91cc75',
highlightStyle: {
fill: '#fac858',
},
valueAxisDomain: [0, 1],
paddingOuter: 0,
padding: {
top: 0,
bottom: 0,
},
axis: {
strokeWidth: 0,
},
} ,
},
},
{
field: 'action',
headerName: 'Action',
sortable: true,
resizable: true,
filter:
true,
cellRenderer: () => {
return `
<button mat-mini-fab="" color="warn" ptooltip="Action History" tooltipposition="top" class="mat-focus-indicator mat-mini-fab mat-button-base mat-primary" style="background-color: #7a1dcf;" ng-reflect-color="primary" ng-reflect-text="Action Detail" ng-reflect-tooltip-position="top"><span class="mat-button-wrapper"><i class="fa fa-list" style="color: #fff;"></i></span><span matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round" ng-reflect-disabled="false" ng-reflect-centered="false" ng-reflect-trigger="[object HTMLButtonElement]"></span><span class="mat-button-focus-overlay"></span></button>
`;
},
},
],
defaultColDef: {
flex: 1,
minWidth: 100,
resizable: true,
},
rowData: getData(),
rowHeight: 50,
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Alan Richardson |