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!

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top