CODEWITHSUNDEEP
highcharts
TwiN
TwiN

Reputation: 1911

Highcharts vertical align legend symbol

I'm doing some highcharts and I use 40×40 images as the legend labels. However, the legend symbols are vertically top-aligned. (fiddle)

legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical',
    labelFormatter: function () {
        return $('<div>').append($('<img>').attr('src', 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png').css({
            height: 40,
            width: 40
        })).html();
    },
    useHTML: true
}

Is there some easy way to vertically center-align the legend symbols?

Upvotes: 0

Views: 1921

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You can wrap positionItem function, to post-translate items to be in the middle: http://jsfiddle.net/6fgMp/3/

(function(H){
    H.wrap(H.Legend.prototype, 'positionItem', function(proceed, item){
        proceed.call(this, item);
        if(item.legendSymbol) {
            item.legendSymbol.translate(0, 10);
        }
        if(item.legendLine){
            item.legendLine.translate(0, 10);
        }
    });
})(Highcharts);

Upvotes: 2

Related Questions