karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Need to display Y-axis dynamic stack total on top .

Hi Team,

I am using below stack label code for displaying total amount on top of each bar but i want to display dynamic total amount on top of each bar which is getting from API.


yAxis: {
stackLabels: {
enabled: true,
}
}

Please find the attachment along with comments.
Can you please provide solution for this.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

Hi karuash,

Welcome to our forum and thanks for contacting us with your question!

Please create a live demo with your current chart config. You can start here: https://jsfiddle.net/BlackLabel/zturheys/
It seems that your post doesn't include any attachments. If something went wrong, please try to reupload them along with a precise description of what exactly do you want to achieve.

Regards!
Mateusz Bernacik
Highcharts Developer
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

Hi MAteusz,

I am unable to attach the file May i know how to attach the document.

Regards,
Ashok.k
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

StackTotal.PNG
StackTotal.PNG (16.08 KiB) Viewed 1951 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

karuash,

You should open JavaScript tab and insert your code like in the example: https://jsfiddle.net/BlackLabel/z80csbvg/
Then you should click fork button on the top navbar and provide me with a link.

Did I understand correctly that you simply want to show custom value that you get from your API in the stack label at the top of the column?

Regards!
Mateusz Bernacik
Highcharts Developer
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

Yes.I have to show custom value that you get from your API in the stack label at the top of the column
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

karuash,

In that case you should most likely use stackLabels.formatter function to edit the content of those labels.
Demo: https://jsfiddle.net/BlackLabel/evyt54a8/
API reference: https://api.highcharts.com/highcharts/y ... .formatter

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

Thanks for the update .I have to display stack total on each bar(2022,2023 and 2024).Can you explain more about formatter with one example.

Regards,
Ashok
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

karuash,

So as I said before, the formatter callback allows you to change the content of stack labels. If you want to show total stack value of each column / bar, then you can refer to this.value property: https://jsfiddle.net/BlackLabel/85osh2k9/

It is a default behaviour though and it seems that on the image that you shared there are already total values shown on each bar. I'm not quite sure what exactly do you want to achieve. If you could provide me with an example then it would be easier for me to come up with a solution.

Regards!
Mateusz Bernacik
Highcharts Developer
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

Hi,

In the above image what ever the total I am displaying that is coming from stack labels only(Addition of all the below stacks.) but i want to display static one(For example i have to display 2000 on top of 2022 bar and 3000 on top of 2023 bar and 4000 on top of 2024 bar ).

Is there any solution for that.

Regards,
Ashok.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

karuash,

In that case you can define an array with your custom data and then use x property to refer to specific element of that array.
Demo: https://jsfiddle.net/BlackLabel/jyx3L2hs/

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

Thanks for the solution but i am getting below attached error after adding labelsData as per the given example code.Image
Attachments
error.PNG
error.PNG (6.16 KiB) Viewed 1920 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

karuash,

Please check if there is any error in the console. If so, let me know what it says.

Regards!
Mateusz Bernacik
Highcharts Developer
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Y-axis dynamic stack total on top .

consoleError.PNG
consoleError.PNG (12.8 KiB) Viewed 1916 times
I am getting error like Cannot find name 'labelsData'.ts(2304) inside Visual Studio Code.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Need to display Y-axis dynamic stack total on top .

karuash,

Most likely there is a problem with labelsData variable and this.x refers to element that doesn't exist. Please make sure that the variable have the same format as in my example and that there is enough elements in the array. If that doesn't help recreate the issue in this demo: https://jsfiddle.net/BlackLabel/jyx3L2hs/

Let me know if it helped.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”