Troubleshooting AG Grid Pie Chart: Legend Key Discrepancy

I need to display the formatted value (currency in this case) in the calloutLabel on the Pie Chart. It's more user-friendly for users to view the value without having to hover the mouse over the pie chart.

I managed to achieve this by using the following code:
return ${useCurrencySymbol(params.datum[params.angleKey]).value};.

I utilized the angleKey to determine the value to be shown in the calloutLabel and took control over the calloutLabelKey. However, by doing this, the legendKey also changes to the same calloutLabelKey, and it returns the currency value of the calloutLabel formatter.

The documentation is unclear about how to change the Legend Key in Integrated Charts. To be honest, all documentation regarding Integrated Charts lacks some information!

How can we gain control over the Legend Key?
Here is the createRangeChart function:

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

  gridApi.value.createRangeChart({
    chartContainer: document.querySelector(`#my_first_chart`),
    cellRange: {
      columns: columnsToChart,
    },
    chartThemeName: "ag-material",
    suppressChartRanges: false,
    chartType: "pie",
    aggFunc: "sum",
    unlinkChart: true,
    chartThemeOverrides: {
      common: {
        title: {
          enabled: true,
          text: "Example Title",
        },
      },
      pie: {
        series: {
          tooltip: {
            renderer: (params) => ({
              title: genderMapping[params.datum[params.calloutLabelKey]],
              content: useCurrencySymbol(params.datum[params.angleKey]).value,
            }),
          },
          calloutLabel: {
            enabled: true,
            formatter: (params) => {
              return `${useCurrencySymbol(params.datum[params.angleKey]).value}`;
            },
          },
        },
        /*  legend: {
          enabled: true,
          item: {
            label: {
              formatter: (params) => {
                console.log(params);
                return `${genderMapping[params.value]}`;
              },
            },
          },
        }, */
      },
    },
  });
};

To conduct a test, please uncomment the line related to the legend and inspect the console for values. Additionally, observe the legend values on the Pie Chart.

Then, comment out the block related to the calloutLabel and reassess the legend.

• Code Sandbox testing scenario

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-10564 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-2110300157