AmCharts 4 : Show totals of clustered and stacked charts, for individual clusters

765 views Asked by At

Background:
Following the example of stacked and clustered charts as shown here I have created a chart with clustered and stacked columns. I am also attempting to display the total of the individual stacks on the top of the column as shown here

Issue faced:
The main is I am facing is the total value is displayed for all the data in the ValueAxis and not for individual stacks. Please help in displaying individual totals for the clustered columns.

Sample code:
Note the inbuilt APIs used to calculate and display totals

// Fully working example in the CodePen

// Enabling totals calculation
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.calculateTotals = true;

// Displaying the total in the LabelBullet 
let totalBullet = totalSeries.bullets.push(new am4charts.LabelBullet());
totalBullet.label.text = "{valueY.sum}";

Codepen depicting the issue (note the totals on top of the stacked columns)

Alternate approaches considered:

  • Adding a field in the data with the totals for the stacks and displaying it instead (Problem: Unable to deselect using the Label - the value would be static and won't change)

Other help from StackOverflow:
Found samples of showing totals on stacked charts, but unable to find help on dealing with grouping

1

There are 1 answers

0
Javier On

Although this is 7months old, I didn't find an answer either for this anywhere. If you haven't found a solution yet I was able to work around this by creating two Y axes and assigning them the series individually, then adding in the 'none' series for the totals bullet as well.

I adapted your Codepen example here in jsfiddle (codepen freezes for me for some reason)

Essentially though you create the two axes, and hide the labels for the second one.

let valueAxis0 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis0.min = 0;
valueAxis0.calculateTotals = true;
valueAxis0.title.text = "Expenditure (M)";


var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis1.renderer.grid.template.disabled = true;
valueAxis1.calculateTotals = true;
valueAxis1.syncWithAxis = chart.yAxes.getIndex(0);
valueAxis1.min = 0;
valueAxis1.renderer.labels.template.disabled = true;

Then select it when creating the series and assign to the appropriate axis with series.yAxis = valueAxis;

function createSeries(field, name, stacked, yAxes) {

    var valueAxis;

    if (yAxes == 0) {
      valueAxis = valueAxis0;     

    } else if (yAxes == 1) {
      valueAxis = valueAxis1;     
    }

  let series = chart.series.push(new am4charts.ColumnSeries());
  ...
  series.yAxis = valueAxis;

Then the same goes for the TotalSeries