Stacked Chart with totals

Hello Team,

Is it possible to add totals on horizontal stacked bar chart on top with value of each stack in middle as well?


Dear @pkp,
No, but you can use the following Label template to display total at the top (instead of one of values):
#= stackValue #

Hello @Nikita_Kurguzov ,

Thank you for the confirmation. Can we add stackValue to tooltip? Does not seems to be working in tool tip

This works nicely. Is it possible to hide the preceding stack totals and only show the last?
1 vs 2

Dear @jaitsujin,
You can hide labels for some of the series with JavaScript in Advanced section, like this:

var handlers = {};
handlers.preRender = function(config, logger) {
  logger.debug('Configuration: ', config);
  config.series[0].labels = {};
  config.series[0].labels.visible = false;
  return true;

I think I figured out a nice solution with your help.

var handlers = {};
handlers.preRender = function (config, logger) {
    // logger.debug('Configuration: ', config);
    // logger.debug(config.series)
    // logger.debug(config.series.length - 1)

    for (const [key, value] of Object.entries(config.series)) {


        if (key != (config.series.length - 1)) {
            config.series[key].labels = {};
            config.series[key].labels.visible = false;
        } else {
            config.series[key].labels = config.series[key].labels || {};
            config.series[key].labels.template = "Total: #: stackValue #";
        	config.series[key].labels.rotation = -80;
          	config.series[key].labels.font = "22px 'Segoe UI Light', sans-serif";
    return true;

This looks like this and was exactly what I was looking for.

Thanks again!

1 Like


So this works all great.

I was wondering though, if it was possible to have the #= stackValue # be shown next to the individual legend item or as part of the series?

Dear @jaitsujin,
Unfortunately, I don't think this one is possible either, maybe with some JS customization that will calculate the total series value for you.