Error at Legend Key Misalignment with CalloutLabel in AG Grid Integrated Pie Chart

[lucaspmarra]

I'm submitting a ...

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Customers of AG Grid

We're currently testing and planning to buy, depending on whether we can achieve our desired functionality.

Providing a Reproducible Scenario
Accepted reproducible scenarios are

• Code Sandbox workspace
• Description:

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.

Current behavior
Pie legend assumes key from calloutLabelKey.

Expected behavior
Be able to pass a legend key so I can show the correct value in Legend.

Please tell us about your environment:
Windows, Cube GraphQL, WebStorm

• AG Grid versions:
  "ag-charts-enterprise": "^9.3.1",
  "ag-charts-vue3": "^9.3.1",
  "ag-charts-community": "^9.3.1",
  "ag-grid-charts-enterprise": "^31.2.1",
  "ag-grid-enterprise": "~31.2.1",
  "ag-grid-vue3": "^31.2.1",

• Language: Quasar with Vue 3 with Typescript setup and Apollo GraphQL

[adam-wang-uk]

Hello Lucas,

Thank you for taking the time to write such an in-depth report.

There's no way to implement this behaviour with AG Grid Integrated Charts. When you make a theme override to the callout labels, the legend labels will copy the changes automatically. We recognised this as a limitation, and there is already a feature request to track this requirement:

AG-10564 [Charts] Provide series datum in legend item formatter params

We have no timeline for this at the moment, but this can still be picked up by our team when they're making modifications to this functional area of AG Grid. Please use the functionality currently provided by AG Grid until this is delivered at a later point.

See whether this item will be in the next release by checking the NEXT RELEASE checkbox on the product pipeline page:
https://charts.ag-grid.com/pipeline/

The best way to track this is to sign up for AG Grid new release notifications using the instructions here. This way you'll know as soon as a new version is out and you can check whether this specific item was implemented on the changelog page.

Thanks again for bringing this up with us.

Kind regards,
Adam

[lucaspmarra]

Good morning, thank you very much for your reply.
I'm sad to hear that, but we'll wait.

Unfortunately, I'm stuck with Integrated Charts because Standalone Charts doesn't support Vue 3, so it's very limited.
Does this limitation also affect the part of passing manual data to the chart, instead of taking the data from “rowData”? The documentation doesn't cover this, as stated here: #7947

Please use the functionality currently provided by AG Grid until this is delivered at a later point.

Could you describe what this functionality is or link me to the documentation?

[adam-wang-uk]

Hi Luca,

Standalone AG Charts does support Vue3 - please see the documentation here https://charts.ag-grid.com/vue/quick-start/ for the Quick Start guide.

You can potentially achieve both of your asks by using a standalone chart with AG Grid, however, it needs to be tested more thoroughly.

Regarding your query on #7947:

You cannot pass a new data range via Theme Override to Integrated Chart. We do have a FR in the backlog to achieve the outcome you are after:

AG-5482 [Integrated] Allow sorting integrated charts independently of the grid

We have no timeline for this at the moment, but this can still be picked up by our team when they're making modifications to this functional area of AG Grid. Please use the functionality currently provided by AG Grid until this is delivered at a later point.

See whether this item will be in the next release by checking the NEXT RELEASE checkbox on the product pipeline page:
https://www.ag-grid.com/ag-grid-pipeline/

The best way to track this is to sign up for AG Grid new release notifications using the instructions here. This way you'll know as soon as a new version is out and you can check whether this specific item was implemented on the changelog page.

Thanks again for bringing this up with us.

Kind regards,
Adam

[lucaspmarra]

Thanks for the quick reply!
I'll keep an eye out for these two updates!

Standalone AG Charts does support Vue3 - please see the documentation here https://charts.ag-grid.com/vue/quick-start/ for the Quick Start guide.

But according to this issue #7964 and this issue ag-grid/ag-charts#699, Vue 3 support is having some problems. Even installing vue-class-component.
Thank you again for your patience in dealing with these cases.