Page 1 of 1
Tooltip Running Total - Stacked Bar Chart
Posted: Mon Dec 18, 2017 7:45 am
by BAWGroup
Is it possible to add a running total to the tooltip with Highcharts cloud? For Example lets say the firsts data point in my Y Xis is 100 and the next is 3. The tooltip will show 100 when hovering over that portion of the bar but when hovering over the 3 will only show 3 and I would like it to show 103 or possibly just 3 and also the total of 103.
Re: Tooltip Running Total - Stacked Bar Chart
Posted: Mon Dec 18, 2017 5:22 pm
by ppotaczek
Hi BAWGroup,
It is possible, I implemented this type of functionality by using
pointFormatter function for tooltip.
Code: Select all
tooltip: {
headerFormat: '',
pointFormatter: function() {
let result = 0;
for (let i = this.index; i >= 0; i--) {
result += this.series.chart.series[0].data[i].y;
}
return 'Actual value: ' + this.y + '<br> Running total: ' + result.toFixed(1)
}
},
I hope that I understood you correctly.
Live demo:
http://jsfiddle.net/40wjhgth/
API Reference:
https://api.highcharts.com/highcharts/t ... tFormatter
Best regards!
Re: Tooltip Running Total - Stacked Bar Chart
Posted: Mon Dec 18, 2017 9:39 pm
by BAWGroup
Thank you ppotaczek. This is almost what I nned. I seem to be having a few issues though.
The "Actual Value" is reporting properly. But the running total is not. In the picture above It shows the running total of that step at 2096825.0 when on the right we can see that the entire bar itself only has a value of 131303.
Re: Tooltip Running Total - Stacked Bar Chart
Posted: Tue Dec 19, 2017 12:24 pm
by ppotaczek
Hi BAWGroup,
I changed the code a bit to adapt to stacked series and it works correctly.
Perhaps in your example, strings are added. Please prepare live example, if you still have this problem.
Code: Select all
yAxis: {
min: 0,
reversedStacks: false
},
tooltip: {
headerFormat: '',
pointFormatter: function() {
let result = 0;
for (let i = this.series.index; i >= 0; i--) {
result += this.series.chart.series[i].data[0].y;
}
return 'Actual value: ' + this.y + '<br> Running total: ' + result.toFixed(1)
}
},
Live demo:
http://jsfiddle.net/23a3hrvr/
API Reference:
https://api.highcharts.com/highcharts/y ... rsedStacks
Best regards!
Re: Tooltip Running Total - Stacked Bar Chart
Posted: Wed Dec 20, 2017 6:36 am
by BAWGroup
New code is reporting "Actual Value" properly but the running total is "0". I don't see where I can export it to JS for jsfiddle but here is a copy of teh edit link.
https://cloud.highcharts.com/edit/141466
Re: Tooltip Running Total - Stacked Bar Chart
Posted: Wed Dec 20, 2017 9:54 am
by ppotaczek
Hi BAWGroup,
I created only example of working functionality of this type, which required customization. Now this code should work with your project:
Code: Select all
yAxis: {
min: 0,
reversedStacks: false
},
tooltip: {
headerFormat: '',
pointFormatter: function() {
let result = 0;
for (let i = this.series.index; i >= 0; i--) {
result += this.series.chart.series[i].data[this.index].y;
}
return 'Actual value: ' + this.y + '<br> Running total: ' + result.toFixed(1)
}
}
Best regards!
Re: Tooltip Running Total - Stacked Bar Chart
Posted: Wed Dec 20, 2017 10:28 am
by BAWGroup
Perfect! Thank you so much for the help.