Why I am getting additional undefined chart column in ag-grid integrated charts

Question

I am using ag-grid library to display some data in the grid view and charts based on this data. I want to group my records by some characteristic(in this example, this will be 'make'). I expected to see 3 chart columns (one for Toyota, Ford and Honda). On the beginning with hide field set to true I can see columns for every record + 3 columns which contains sum of each group. After some time, I spot that if I remove this hide field, then I am getting almost what I want. I have my 3 columns each for one group, but I am also getting one additional column which shows sum of all my records and I want to avoid seeing this column. What's more, I also see an additional Group column in my grid which is not needed, and I want to hide this. In the end I read some about pivot-charts, but they don't support cross filtering, so this is not solution for my problem unless I am missing sth and I can make pivot charts cross-filtering too.

Assuming I would like to see:

grid with 3 columns: make, model and price. Where make, is a grouping column,
chart with 3 columns, one for each make (Toyota, Ford, Honda). Chart should allow cross filtering

const agGrid = window.agGrid;
const gridContainer = document.querySelector('#gridContainer');
const chartContainer = document.querySelector('#chartContainer');

const columnDefs = [
  { field: 'model' },
  { field: 'price', type: 'number', chartDataType: 'series' },
  { 
    field: 'make', 
    rowGroup: true,
    hide: true,
    cellRenderer: 'agGroupCellRenderer',
    chartDataType: 'category', 
    filter: 'agMultiColumnFilter', 
  }
];
const rowData = [
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Toyota', model: 'Yaris', price: 26000 },
  { make: 'Toyota', model: 'Corolla', price: 3700 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Ford', model: 'Focus', price: 28000 },
  { make: 'Ford', model: 'Fiesta', price: 25000 },
  { make: 'Honda', model: 'Civic', price: 26000 },
  { make: 'Honda', model: 'CRV', price: 72000 },
  { make: 'Honda', model: 'Acord', price: 32000 }
];
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  groupSelectsChildren: true,
  suppressAggFuncInHeader: true,
  rowSelection: 'multiple',
  columnTypes: {
    number: {
      aggFunc: 'sum'
    }
  },
  onFirstDataRendered: ({ api }) => {
    api.createCrossFilterChart({
      cellRange: { columns: ['make', 'price'] },
      chartType: 'column',
      aggFunc: 'sum',
      chartContainer: chartContainer
    });
  }
};

document.addEventListener('DOMContentLoaded', () => {
  new agGrid.Grid(gridContainer, gridOptions);
});

@import url('https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css');
@import url('https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css');

Why I am getting additional undefined chart column in ag-grid integrated charts

0 Answers