How do you add text to the bottom center of legend and bottom center of chart under legend?

Question

I have a custom HighCharts that have totals in the legend. I need to add one line of custom text centered under the totals "in the legend". Also I need to add text center at the bottom of the chart "under the legend".

See fiddle: http://jsfiddle.net/no1uknow/cvsTB/

[EDIT] I did figure this much out but don't know how to get text centered under legend. http://jsfiddle.net/no1uknow/cvsTB/1/

$(function () {
    var chart; 
    $(document).ready(function() {



        var container_chartFreqAtaTailNum = new Highcharts.Chart({
        chart: {
                renderTo: 'container_chartFreqAtaTailNum',

                        type: 'bar',
                        height: 795

                    },
                    title: {
                        text: 'Frequency by Tail Number'
                    },
                    subtitle: {
                        text: 'Fact ATA (25)'
                    },
                    xAxis: {
                        categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'],
                        title: {
                            text: 'Tail Number'
                        },
                        labels: {
                            style: {
                                width: '12000px'
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Count',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return ''+ this.series.name +': '+ this.y +' Count';
                        }
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        },
                        series: {
                            pointWidth:10,
                            groupPadding: .05,
                            shadow: true
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom',
                        floating: false,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true,
                        labelFormatter: function() {
                            return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">   Total: ' + this.options.total + '</span>';
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: { 
                        enabled: true 
                    },
                    series: [{
                name: 'Heavy',
                total: '5421',
                data: [117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317]
                },{
                name: 'Intermediate',
                total: '4888',
                data: [299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277]
                },{
                name: 'Line',
                total: '659',
                data: [29,38,50,47,33,27,22,67,57,44,36,53,41,37,35,43]
                },{
                name: 'Lite',
                total: '2172',
                data: [101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116]
                }]
                });

    });
}); 

Answer 1

spacingBottom is what you need to add, and also you need to take care of the offset:

chart: {
            events: {
                load: function () {
                    var label = this.renderer.label("How do I move this center and under the legend.")
                    .css({
                        width: '450px',
                        color: '#222',
                        fontSize: '16px'
                    })
                    .attr({
                        'stroke': 'silver',
                        'stroke-width': 2,
                        'r': 5,
                        'padding': 10
                    })
                    .add();

                    label.align(Highcharts.extend(label.getBBox(), {
                        align: 'center',
                        x: 0, // offset
                        verticalAlign: 'bottom',
                        y: 50 // set the right offset
                    }), null, 'spacingBox');

                }
            },
            renderTo: 'container_chartFreqAtaTailNum',  
            type: 'bar',
            height: 895,
            spacingBottom: 100 // The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).         
        }

Here is the fiddle: http://jsfiddle.net/uMBHf/1/