Initially, I am passing unprocessed raw data to ag-Grid to populate the grid, resulting in a chart with randomly arranged ages. I now need to sort and process the age data before passing it to my range chart in order to create a sorted chart, while keeping the grid data unsorted.
To achieve this, I have implemented a simple JavaScript sort function:
const sortedData = computed(() => {
return data?.sort(
(a, b) => a.salesOrders.customerAge - b.salesOrders.customerAge,
);
});
Although my sortedData now contains all the data sorted by customerAge, I am facing difficulties in getting the chart to utilize this sorted data instead of the rowData from ag-Grid. Any suggestions on how I can make the chart use the sortedData?
Access the Code Sandbox workspace here
I have also encountered limitations in using chartThemeOverrides to set the chart theme and create an option flag within the createRangeChart function itself.
const onFirstDataRendered = () => {
console.log("Initializing 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,
},
},
},
});
};