In the end, had to edit highcharts.js to implement this.
How to display stack total just below the stack columns and not inside?
-
18-10-2022 - |
Question
From highcharts api, http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/yaxis/stacklabels-verticalalign-bottom/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
stackLabels: {
style: {
color: 'black'
},
enabled: true,
verticalAlign: 'bottom'
}
},
plotOptions: {
column:{
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: false,
}
}
},
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]
}]
});
}); , the stack totals are placed at the bottom "inside" the chart. Usually, these totals should be at the bottom but outside the chart, just above the x axis labels.
In this example, I want to achieve something in which the totals are located where the 'Jan', 'Feb', etc are. Is that possible using highcharts plugins or methods?
I had a workaround here http://jsfiddle.net/67LCM/
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div id="div1" class="myToolTip' + this.value +'" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
var elm = this.children.div1.className;
switch (elm) {
case "myToolTipAIA":
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AIA</p>');
break;
case "myToolTipAMP":
$('#hoverboard').html('AMP');
break;
case "myToolTipAMP RPP":
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AMP RPP </p>');
break;
case "myToolTipFidelity Life":
$('#hoverboard').html('Fidelity Life');
break;
case "myToolTipAsteron Life":
$('#hoverboard').html('Asteron Life');
break;
}
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
where I store the total and display it in the xaxis labels,but it can't handle when the legends are clicked on. I have made a few changes (not included in this fiddle) and in the process, I found out I can't use this workaround because the categories/x-axis labels are always updated first before the stack labels get updated when the chart is redrawn which means I will always get the old total and not the latest one.
Going back to my question, how do I achieve where the stack totals are displayed just below the stack columns, not within?
Thanks!
Solution