How to show column total in stacked column chart

[Valeria de la Torre]

Hi,

I was wondering if there is some way of display the total of the column on a stacked column chart?

Something like this:

[Swetha Babu]

Hi Valeria,

Greetings from Syncfusion.

We can get the total value of the stacking column by using the stackedValues property in the series argument of the pointRender event and render the values in the data label by using the text argument in the textRender event of the chart. We have created an application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-yyxyyi?file=src%2Fapp.component.html

Code Snippet:

<ejs-chart (pointRender)="getEndPoint($event)" (textRender)="changeText($event)">           

    </ejs-chart>

 

public getEndPoint(args: IPointRenderEventArgs): void {

        if (args.series.name === "Honda") {

            this.values = args.series.stackedValues.endValues;

        }

    };

 

    public changeText(args: ITextRenderEventArgs): void {

        args.text = (this.values[this.count]).toString();

        this.count++;

        if (this.count > 12) {

            this.count = 0;

        }

    }

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha

[Valeria de la Torre]

Thank you so much, this work perfectly!!

[Swetha Babu]

Valeria,

Most Welcome! Please get back to us if you need further assistance.