Highcharts Legend Name Horizontal Alignment

Question

In the example, the name of the legend "City" is horizontally aligned to the left. Is there a way in which you can horizontally combine the name with the center of the legend area?

    legend: {
        title: {
            text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
            style: {
                fontStyle: 'italic'
            }
        }
    },

Editing the style in the title of the legend above doesn't seem to do anything.

Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/title/

Thank.

Answer 1

Hard.

The only thing I can think of is to do this programmatically on the load in the diagram:

function(){
    var legWidth = this.legend.maxItemWidth; // width of legend
    $.each(this.legend.title.element.children[0].children, function(i,j){
        j = $(j); // for each span in title
        var spanWidth = j.width();
        j.attr('dx', (legWidth / 2) - (spanWidth / 2)); // move it to center
    });
}

Updated fiddle .