[SOLVED] Unable to pass data manually to createRangeChart in Ag-Grid

Unable to pass data manually to createRangeChart in Ag-Grid

I'm initially passing raw data to ag-Grid without any processing to populate the grid, which works well. However, the raw data results in a chart with many randomly arranged ages (all data).

I need to sort and process the age data before passing it to my range chart to create a sorted chart, while keeping the grid data unsorted.

I'm making a simple javascript sort to get the data working:

const sortedData = computed(() => {
  return data?.sort(
    (a, b) => a.salesOrders.customerAge - b.salesOrders.customerAge,
  );
});

So my sortedData has all the data sorted by customerAge, but I'm unable to get the chart to use it instead of the rowData from ag-Grid. How can I make the chart use sortedData?

Code Sandbox workspace

I'm unable to use chartThemeOverrides to set the chart theme and create an option flag within the createRangeChart function itself.

const onFirstDataRendered = () => {
  console.log("Starting chart...");

  gridApi.value.createRangeChart({
    chartContainer: document.querySelector(`#my_first_chart`),
    cellRange: {
      columns: columnsToChart,
    },
    chartThemeName: "ag-material",
    suppressChartRanges: false,
    chartType: "column",
    aggFunc: "sum",
    unlinkChart: true,
    chartThemeOverrides: {
      bar: {
        series: {
          data: sortedData,
        },
      },
    },
  });
};

Solution

If you, like me, had this doubt and ended up here... know that it is not possible at this time (20/05/2024).

There is issue AG-5482 in the ag-grid team's back-log, but it is not expected to be implemented.

To read more, just go to the issue I opened on GitHub: https://github.com/ag-grid/ag-grid/issues/7951#issuecomment-2110275682