How to show total value/data on top of stack bar chart ag-grid/ag-angular-chart

Question

How can I display the total value on each stacked bar chart. I am using ag-grid's chart. Below is my code and I have tried a lot but couldn't find anything.

<ag-charts-angular [options]="graphOptions">
</ag-charts-angular>

getData() {
this.graphOptions = {
      data: this.reportingChartData,
      theme: {
        palette: {
          fills: [
            '#DD368A',
            '#663991',
            '#29ABE2',
          ],
          strokes: [
            '#DD368A',
            '#663991',
            '#29ABE2',
          ],
        },
        overrides: {
          column: {
            series: {
              label: {
                fontFamily: "Interstate-Regular",
                fontSize: 12,
                color: '#FFFFFF',
                formatter
              },
             
              }
            },
            axes: {
              category: {
                label: {
                  fontSize: 13,
                  fontFamily: "Interstate-Regular",
                  color: "#808080",
                }
              },
        },
      },
      series: [
        {
          type: 'column',
          xKey: 'MONTH',
          yKey: 'A',
          yName: '31-60 Days',
          stacked: true,
          label: { formatter },
          tooltip: { renderer: renderer }
        },
        {
          type: 'column',
          xKey: 'MONTH',
          yKey: 'B',
          yName: '61-90 Days',
          stacked: true,
          label: { formatter },
          tooltip: { renderer: renderer }
        },
        
      ],
    };
  }
}

expected result enter image description here

now my question is how to show total data on the top of each stack bar chart

Answer 1

You need to declare your formatter, that's what will format the label for each column. Mine for a bar chart looks like this:

const formatter = ({ value }) => (value == null ? '' : value.toFixed(0));

That's from my React app so there might be formatting changes but hope this helps, this is for labeling a bar chart using totals.

value == null

Is starting the if statement. If the statement is true it will return whatever comes after the ? which in this case is '' If the statement is false it will return whatever comes after the : which in this case is the int rounded to the nearest whole number.