score:2

Example for you: http://jsfiddle.net/xqag5e72/2/

In short, you can change translation for legend to be similar to xAxis' title:

function moveLegend(e) {
    var legend = this.legend,
        x = this.plotLeft + (this.xAxis[0].width / 2) - legend.group.getBBox().width / 2,
        y = legend.group.translateY;
    legend.group.attr({
        transform: 'translate(' + x + ',' + y +')' 
    });
}

Note: I'm using load and redraw events, to translate legend after first initialization and later to make this legend responsive.


Related Query

More Query from same tag