How to display stack total just below the stack columns and not inside?

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>&nbsp;',
            'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        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!

Answer 1

In the end, had to edit highcharts.js to implement this.