Display sum on top of stack ?

[raed667]

Hi,

I have an XYChart that is stacked. I would like to display on top of each "category" the sum of the stack.

Is there an option to do that?

Something that looks like this ?

[martynasma]

Challenge accepted :D

One option is to use a BulletLabel on the "Series Y" to display {valueY.total} in it:

https://codepen.io/team/amcharts/pen/5a84f22842db8f2cd3b5fd49db6c85c2?editors=0010

P.S. note that chart does not calculate totals by default, you need to enable it by setting calculateTotals true on your value axis.

This method does not position labels on top as well.

Do you think this is something you could work with?

[raed667]

@martynasma waw that works perfectly ! Thank you! I'm not sure if the LabelBullet can be aligned on top of the chart tho

Just one last question, is there a way to add a bit more space on top of the chart so that top values would not be cropped (first one)

[martynasma]

Just one last question, is there a way to add a bit more space on top of the chart so that top values would not be cropped (first one)

Sorry missed that follow up question.

Not right now. We're currently working on some updates that will allow "padding" scale with additional values.

Stay tuned.

[zeroin]

In case you don't have horizontal Scrollbar, you could set: chart.maskBullets = false; (setting some chart.paddingTop = 20) might also help. With horizontal scrollbar this will result bullets visible out of plot area while scrolling.

[martynasma]

Good point. Here's a doc section related to @zeroin comment:
https://www.amcharts.com/docs/v4/concepts/bullets/#Bullets_outside_plot_area

At some point we are also going to implement the value "padding" I mentioned. But for now, it's enough to achieve what you require, so I'm going to close this.

But please feel free to post any follow up questions you may have.

[raed667]

@martynasma thank you for the great support.

One last question: is there a way to problematically remove bullets from a given series ?

[martynasma]

Do you mean dynamically removing bullets from existing LineSeries?

There are a number of ways to do so.

If you want to temporarily toggle off/on bullets, you can do so:

  series.bullets.each(function(bullet) {
    bullet.applyOnClones = true;
    bullet.disabled = !bullet.disabled;
  });

If you want to completely remove bullets:

  var bullet;
  while(bullet = series.bullets.pop()) {
    var clone;
    while(clone = bullet.clones.pop()) {
      clone.dispose();
    }
    bullet.dispose();
  }

Here's an example demonstrating both:
https://codepen.io/team/amcharts/pen/rrRmom?editors=0010

Please note that above complete removal example is quite excessive. It should be enough to dispose a bullet in order for its clones to be removed as well, but it's currently not yet implemented like that, hence the code.

Here's an open issue about that:

Once it is implemented, removal will be as simple as this: #224

var bullet;
while(bullet = series.bullets.pop()) {
  bullet.dispose();
}

[raed667]

Thank you this works great, I'll be looking forward for the #224

[AnnaDanshina]

Hi! I've tried your solution for setting the total on the top of stacked chart, but I have a little problem with small values. When I set a small value, the total disapears. Here I've copied your solution https://codepen.io/AnitraDanshina/pen/YdxyWb?editors=0010#0 with 0 and 100 values. The only middle column has the total. How can I fix that?

[martynasma]

@AnnaDanshina

bullet.label.hideOversized = false;

[JoseWitjaksono]

Hi, i have problem with displaying total value on horizontal stacked chart
if the total value more than 1 digits, its masked by dot
any solution ? :(