Highcharts Legend Title Horizontal Align

5
votes

In the example the legend title 'City' is horizontally aligned to the left. Is there a way I can horizontally align the title to 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 legend title 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/

Thanks.

1
javascripthighcharts

1 Answers

4
votes

Tough one.

Only thing I can come up with is to do it programmatically on chart load:

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.