I have a stacked column chart that shows 3 keys / values for each month stacked one on top of the other. Some months may have negatives. The current functionality is for highcharts to put two stacked labels for each month. One for the positives (on top) and one for the negatives (on bottom).
Please see the code below and the js fiddle as an example:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
stackLabels: {
enabled: true,
align: 'center'
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: false,
color: '#FFFFFF'
}
}
},
series: [{
data: [29.9, -71.5, 106.4, -129.2, 144.0, -176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
data: [55.9, 90.5, 106.4, 350.2, 144.0, 52.0, 130.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
http://jsfiddle.net/sph1LjtL/
My desired functionality is to actually have one stacked label that includes the sum of all three values instead of two separate labels. So for February (in the fiddle) it would show 195 above the column because 266.50 - 71.50 = 195.
I have been trying to figure a way to do this but have been unsuccessful because highcharts is treating the positives and negatives as separate charts. Any help would be appreciated! Thank you.
See Working fiddle here
Used the solution provided by Pawel Fus (Highcharts) at this Link
yAxis: {
stackLabels: {
enabled: true,
align: 'center',
formatter: function() {
var sum = 0;
var series = this.axis.series;
for (var i in series) {
if (series[i].visible && series[i].options.stacking == 'normal')
sum += series[i].yData[this.x];
}
if(this.total > 0 ) {
return Highcharts.numberFormat(sum,1);
} else {
return '';
}
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With