How to align bottom of legend to the X axis line?

Question

I want to align bottom of legend to X axis.

I was thinking about something like that:

var legend= chart.legend;
var legend.Y= Chart.plotTop + Chart.plotHeight - legend.legendHeight;

but, there is no property Y of object legend. Could you provide some sample code or give some tip?

I want also to align chart title to left Y axis labels. How can I get width or property "left" of top y axis label?

Charts will be generated by users, and they should have a possibility to format charts as they want(for example make visible or hide axis category title). And because of that I do not want to use fixed values, because once it would work ok, once not.

Thanks

link to image: http://www.fotosik.pl/pokaz_obrazek/pelny/12dadc5d85228db9.html

Answer 1

Edited

As for axes: Right title is simple - move left for 10. Left is harder. You could use the top tick (its x position) and length of label of that tick.

As of alignment of the legend you can use translate and get chart's size from variables shown in example below (chart.plotTop + chart.plotHeight - legend.legendHeight)

Example: http://jsfiddle.net/0ur3L0pL/8/

$(function () {
    var primText = 'primary',
        secoText = 'secondary',
        hidden = $('<span id="hidden" style="display:none; ont-size:11px; "></span>');
    $('body').append(hidden);

    $('#container').highcharts({
        chart: {
            type: 'column',
            marginTop: 80
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -60 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: primText,
                rotation: 0,
                align: 'high',
                y: -25
            }
        }, {
            title: {
                text: secoText,
                rotation: 0,
                align: 'high',
                y: -25
            },
            opposite: true
        }],
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5],
            pointWidth: 10
        }, {
            name: 'New York',
            data: [0.8, 5.7, 11.3, 17.0, 220.0, 24.8, 24.1, 20.1],
            pointWidth: 5,
            yAxis: 1
        }]
    },

    function (chart) {
        var legend = chart.legend,
            group = legend.group,
            x = group.translateX;

        group.translate(x, chart.plotTop + chart.plotHeight - legend.legendHeight);

        var ticks = chart.yAxis[0].ticks,
            pos = chart.yAxis[0].tickPositions,
            top = pos[pos.length - 1].toString(),
            topX = ticks[top].label.xy.x,
            topString = ticks[top].label.element.innerHTML;

        hidden.text(topString);

        chart.yAxis[0].update({
            title: {
                x: topX - hidden.width() - 8
            }
        });
        chart.yAxis[1].update({
            title: {
                x: -10
            }
        });

    });
});

Answer 2

Actually there is a y property for legend. What could probably cause your confusion is the fact that when you are not using floating:true, and try to render the legend in the middle of the plot, highcharts will ignore the y property since it could cause overlapping. when floating the legend this behaviour does not apply. you can see this example: http://jsfiddle.net/axfahe5u/2/

    legend: {
        align: 'center',
        floating:true,
        verticalAlign: 'bottom',
        y: -15
    },

and for the chart title you can simple set the properties for the title object, as below:

     title:{
         align:'left',
         x:-10
    },

you can see the above fiddle for usage reference.

In order to do it after chart was rendred

Here I used a callback function that is called right after chart is rendred. You can use it differently in any other call.

$('#container').highcharts({
    chart:{
        marginLeft:170,  
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
            legend: {
                verticalAlign: 'bottom',


                floating:true,
            },
    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]
    }]

}, function(){
                //legend
                var legend = $('#container .highcharts-legend');
                var x = legend.position().left;
                var y = legend.position().top - 20;
                legend.attr({
                    transform: 'translate(' + x + ',' + y + ')'
                });
                //title
                var title = $('#container .highcharts-title');
                x = title.position().left-690;
                y = title.position().top;
                title.attr({
                    transform: 'translate(' + x + ',' + y + ')'
                });
});

fiddle: http://jsfiddle.net/LLExL/3601/