add total count inside stack labels grouped stacked column chart- Highcharts

Question

I have a stacked grouped column highcharts like http://jsfiddle.net/d_paul/d9yb1yy1/

currently in stackLabels I'm adding the stack name, now I am trying to add the total count of a column at the top of every column. however when I add them into the dataLabels, I see other series of labels also showing up.

 plotOptions: {
          column: {
            stacking: 'normal'
          },
  formatter : function() {
              return "<span>" + this.total + "</span>";
            }
        },

this will show the labels on every stacked series. I want to simple show one count / column in the chart any idea?

ppotaczek ppotaczek · Accepted Answer · 2020-10-02T11:09:21

You can add stack-total values by stack labels and try to use the grouped_categories plugin to add the stack name.

    xAxis: {
        categories: [{
            name: 'category1',
            categories: ['A', 'B']
        }, {
            name: 'category2',
            categories: ['C', 'D']
        }]
    }

Live demo: http://jsfiddle.net/BlackLabel/L0pko9h5/

Docs: https://blacklabel.github.io/grouped_categories/

The other way is to use Highcharts.SVGRenderer class and manually render the labels.

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

add total count inside stack labels grouped stacked column chart- Highcharts

1 Answers